Exploring the state of reactivity patterns in 2020

This is the third article of Custom Theme for Angular Material Components Series. In the first and second, we understood how Angular Material’s and its components' themes work.

We explore how to test route guards in isolation by stubbing services and passing fake routing data structures. Then we use the RouterTestingModule to test route guards in practice with route configurations.

Hello devs and testers, in this article, I'll show you how we can write automated end-to-end tests on an angular project which is Todo App on cypress [https://www.cypress.io/]. We will have some scenarios for doing our e2e tests and we will be covering it one by one. This article will not probably be covering angular parts but cypress parts. So if you just want to write some tests right now, do clone this repo which I have already created with the angular Todo App project and cypress configured

Easily integrate Firebase with NGXS to keep all your data synced in the store

Want to build your Angular app once and deploy anywhere? Learn why compile-time configuration isn't enough and how we can load configuration at run-time.

Understanding some of the inner workings of Angular Forms by solving an interesting problem.

In the first part, we had an overview of Vite's features and how to implement it. Now, we will try to get an abstract of Vite's logic.

One of the major advantages of ngrx is that we can isolate side effects from the components. When we need to have router related data on the component we'll usually use the ActivatedRoute service from the component itself. For example, we can get the id from a route using this technique: export class MyComponent { id: string; id$ = this.activatedRoute.params.pipe( map(params => params.id), tap(id => this.id = id), ); } Let's isolate this using @ngrx/effects. The first goal is

The twelve-factor app [https://12factor.net/] If we take a look at the description of such an app, it says: In the modern era, software is commonly delivered as a service: called web apps, or software-as-a-service. The twelve-factor app is a methodology for building software-as-a-service apps that: * Use declarative formats for setup automation, to minimize time and cost for new developers joining the project; * Have a clean contract with the underlying operating system, offering maximum

Understand Theme of Angular Material and its different Components by taking a deep look into Angular Material Components' github repo.

In this post, we're going to add rx-query [https://github.com/timdeschryver/rx-query] to the Angular Tour of Heroes while pointing out the benefits of rx-query. Before we start, I just want to mention that rx-query is inspired by react-query [https://react-query.tanstack.com/] and SWR [https://github.com/vercel/swr/]. rx-query provides an easy way to fetch data over HTTP. This is already the case withing Angular applications, so why should you care? Because adding rx-query is no extra work, an

It can be frustrating to deal with all the subscriptions to the store. But what if we could get rid of all the Observables?

When using Angular Forms, by default, on every keystroke, the values of your form controls are updated and their associated validators are executed. This may not be always desirable. The updateOn option gives us a finer-grained control over the moment when value updates and validators are triggered.

Learning best practices on how to build your custom validator in Angular by reverse engineering the built-in Angular validators.

Prefetching can be used to make your application feel faster. This is trivial within an application that is using the global NgRx Store, as the global Store is just a cache object. By just creating an action and listening to that action inside an Effect, we can preload the cache.

Last week I tweeted on Twitter how I am moving from a Slum where I lived for 29 years to a multi-story apartment on rent. The tech community on Twitter responded with nothing but the love. Dan Wahlin posted that he would love to hear more about my story.

In this article we will present Vite's main features and givea some hints on how to "migrate" to Vite.

Learn how to Create and Apply Custom Theme to different Angular Material Components.

Our team “moved everything” into NgRx. Follow our journey and learn why the whole team is still happy with it.

The main idea behind the Angular push pipe is a new way of handling change detection locally instead of the global handling used in async pipe by Angular natively. It is implemented in a way we can get zone-less performance in zone-full applications.

Angular has a tremendous amount of APIs and utilities available out of the box. In this article, we will explore one of those interesting and quite helpful set of utilities, i.e. Coercion.

In this article, we are going to further explore the notion of reactive programming, but also apply it to more complex situations, and find beautiful solutions even for the ugliest problems.

This articles provides all the necessary information you need to know about change detection. The mechanics are explained by using a demo project which was built for this article.

When you’re building a reusable components library, API is very important. On one hand, you want a tidy, reliable solution, on the other — you need to take care of lots of specific use cases. Learn how to make components that work with everything and look like anything!

Angular 10 is released, many developers sent me messages asking we cannot see any features, yes there was no big feature, but sometimes you need to take some time to prepare for a better future, and this is what Angular 10 release was all about.

In this article we will focus on three points you should be aware of to use RxJS marble tests effectively.

Write elegant conditional validation, cross field validation code for managing Angular Reactive Forms.

10 tips and tricks from June every day challenge that have the most likes and explanation of their concepts in more detail.

Finally there is an Angular option for JAMstack. In this article I'll tell you my path of migration WordPress blog to Scully.

Angular has a powerful Dependency Injection basis. Let's make it more tidy.

Check out these advises backed by concrete examples which can help you improve your developer skills and give you some practical tricks.

We will take a look at different scenarios where using CSS Modules with Angular is a good option, and understand when it's not a perfect choice.

Explore the various animation methods in Angular, their use cases, implementation, and some tips on performance, debugging, and reusability.

Learn how to build a generic menu with Angular. Menu items configurable with HTML with no sub-menu nesting. Guide focuses on menu`s logic, not the looks.

Explores the functionality and use cases of the Nullish Coalescing operator (??) that was added in TypeScript 3.7.

The purpose of this article is to make our Angular template code readable and enable a high-caliber performance by following the right practices. It's very useful to have good practices in place for an Angular template to overcome the future performance-related issues in the enterprise application. In this article we'll learn the most appropriate approach for binding the data with a few common use cases of template syntax binding, and how efficiently we can solve the current/future problems. I

In this article, we learn about how to convert the reactive form into strongly-typed without changing the class definition. Many of us love TypeScript as its Strongly-Typed. This gives the main power to the Angular Framework, But Angular Reactive Forms are not fully Strongly-Typed, Because of the substantial use of ‘any [https://www.typescriptlang.org/docs/handbook/declaration-files/do-s-and-don-ts.html#any] ’ keyword, this creates a nasty code while developing the form in terms of mismatch typ

For the years, one of the biggest pain in Angular was to debug, because of the error message, there was no clear stack trace where the actual error is. Ivy improved it a lot, because of the locality principle, and gives us the line number too.

When your favorite library doesn’t work as you think it does In my recent article [https://indepth.dev/angular-the-unexpected/] I talked about things that are unexpected for developers in Angular; so it is only logical to now focus on some pitfalls that are present in RxJS — the faithful companion of Angular. RxJS has truly been a given for any Angular application — we use it on a daily basis to work with forms, HTTP calls, events, and so much more. Of course, it is tempting to think that we u

An in depth look at building Solid's reactive renderer, piece by piece, from the ground up.

In this article we're going to explore the difference between ng-content and ng-template  and see when to use which

In RxJS 7 toPromise will become deprecated and with RxJS 8 it will be gone! So avoid using toPromise in your future development when possible.

Learn how to build a stepper component using Angular CDK, just like the one in Angular Material, but with your own look and feel.

Exploring the trend that has already changed the shape of front end UI development regardless of framework.

From this the article you will learn how to handle ESLint and Prettier in a good way.

We learn how to stub the ActivatedRoute service for shallow routed component tests. We then use the RouterTestingModule for integrated routed component tests.

Believe me struggle to reduce the bundle size is something we all struggle with, it is the same with us, and I am crazy about optimizing things, and want my bundle to be as small as possible once my application is stable and in running state.

When your favorite framework doesn’t work as you thought it does Every Angular developer has encountered some instances when the framework did something unusual, and sometimes even outright nonsensical. Today we are going to take a look at some of those cases and explain why it works the way it does. FormControl.disable triggers valueChanges Observable The problem: When using Reactive Forms the default way of disabling a FormControl is by using the methods enable and disable. Let’s take a loo

This article teaches us about shallow and integrated routing component tests. The RouterTestingModule is useful for integrated routing component tests. To learn what the RouterTestingModule does, we discuss the Location service and its dependencies.

Learn how to extract presenters from presentational components. We discuss stateful and stateless presenters, component-to-presenter ratios and when to use a component or a pipe instead of a presenter.

In the final part of this tutorial, we create the seatmap data access, seat listing feature, shared buttons UI, and shared formatting utilities library. Finally, we compare our approach with the full Nx toolchain.

A quick introduction to the Deno CLI. It's a batteries included executable with everything you need to develop, test, and run Deno code.

In this article, we'll cover the feature of uploading files to a Firebase Storage Bucket using Firebase Storage [https://firebase.google.com/docs/storage] and Reactive Forms [https://angular.io/guide/reactive-forms] in Angular. You'll get the best learning experience out of this article, if you have a basic understanding of Angular, Angular Material and Firebase is relevant. If you already took some steps inside Angular development together with Angular Material and like to know more about it,

In Part 4 of this tutorial, we create the check-in data access and check-in feature shell libraries. We create the check-in desktop application, review and verify how much our tool automated and finally create the mobile check-in application.

In this article, we describe our approach to creating an Angular library for CRUD UI components. We derive the UI components from an abstract base class containing shared logic.

The release of Deno 1.0 was the topic of this week, there was always someone talking about it everywhere I looked. Having not yet taken a look myself, I had to try it out now. As my first experience with Deno, I created a minimal API server. In this post I jotted down my thoughts for the initial developer experience. To get up and running with Deno, see the installation guide [https://deno.land/#installation] and getting started guide [https://deno.land/#getting-started]. It's easy and fast It

In this artice, we will explore how angular makes non Ivy libraries compatible with Ivy libraries using its compatability compiler ngcc

In Part 3 of this tutorial, we create the passenger info and flight search feature libraries. We use the generate project tool to create the mobile booking application and its test project. Finally, we create a mobile version of the flight search component template.

Sometimes a component needs to raise an event to the parent component to notify them of action e.g., click. In this post, we will examine how a parent component can cancel or prevent a default action from taking place.

In this article, I will be sharing my experience of publishing my first Angular library to NPM. This post will cover steps right from creating the library to detailed NPM publishing steps.

In this article I am going to explain how tree shaking happens in Angular Ivy. I will briefly explain the tree-shakable concept and how Ivy achieves it and then jump into an example.

In Part 2 of this tutorial, we'll set up our custom generate project tool and create the shared and booking data access libraries with NgRx. To honor the flow of dependencies, we extract a shared environments library.

In a previous article, Managing different slices of the same NgRx state [https://timdeschryver.dev/blog/managing-different-slices-of-the-same-ngrx-state] , we had to overcome some hurdles to slice up the state in order to provide the NgRx Store and Effects to same components but with a different id. Triggered by Michael Hladky [https://twitter.com/Michael_Hladky]'s work on @rx-angular/state [https://www.npmjs.com/package/@rx-angular/state] and Alex Okrushko [https://twitter.com/AlexOkrushko]'s

In this step-by-step tutorial, we set up an Nx-style monorepo workspace with the Angular CLI. In this first part, we create an application project, an end-to-end test project, and a feature shell library.

A potential use case for using deferred object/pattern in asynchronous javascript

I struggled to find an explanation from a low-level view of exactly how a “ JavaScript type system compiler” is implemented. I understood many of the jobs of a type system but was unsure of the mechanisms involved and how they worked together. This article will aim to shine a light on some of the fundamentals at work under-the-hood. It is not possible to focus on everything in 1 article so here we will be looking at “type checks” specifically. Starting with an overview of type systems then buil

In this article, we'll combine Angular and NestJS while building a journal app and learn how to take advantage of code sharing in a Nx monorepo

We'll look at ngtsc, explore template and decorators compilation process and learn a few things about Angular compilers design principles.

Creating a mock for unit testing is both necessary and tedious. Let's try and automate that away.

Builders, custom typescript transformers, custom tslint rules, schematics — how not to be overwhelmed and lay it all out in your head? This article intends to lay it out for your.

In this article we'll explore building and bundling Web Components in Angular, approaches to consume Elements that has been enabled by Ivy and some limitations.

In this article we'll explore what are web components and why we care, their use cases and how/where Angular Elements comes into play.

In this article, I will show how to automate your deployment of the angular app to AWS S3 [https://aws.amazon.com/s3/] service by creating a pipeline on AWS Codepipeline [https://aws.amazon.com/codepipeline/] service or in short we will do CI/CD for an angular project. In Case, you are wondering what are these AWS services, AWS Codepipeline AWS CodePipeline is a fully managed continuous delivery service that helps you automate your release pipelines for fast and reliable applications. Read more

This article covers a basic overview and an in-depth explanation of the mechanics of JS code generators and source maps. Building our own from scratch, hence why it is quite long.

We will start by defining what is the DI pattern and what is a good use-case for such a pattern.  The main goal of this pattern is disconnecting the client from the knowledge of how to construct a service or an object it needs and letting someone else handle the construction (aka - Injector). When you create an object within your class aka "newing it yourself" you bind your class to these objects making it impossible to switch implementations from outside of your code example -  using configura

canActivate > Interface that a class can implement to be a guard deciding if a route can be activated. If all guards return true, navigation will continue. If any guard returns false, navigation will be cancelled. If any guard returns a UrlTree, current navigation will be cancelled and a new navigation will be kicked off to the UrlTree returned from the guard. The canActivate guard decides if route can be navigated to, which results in the creation of the route's component. To implement the gua

Last week a friend and college of mine was stuck with a problem. An NgRx effect was subscribed to a stream of WebSocket messages, but the effect didn't receive any messages. Though, we saw that the server was sending them and that they reached the client. The problem wasn't the Effect, but the WebSocket stream that was wrongfully initialized. The use case was to only establish the WebSocket connection for the users that had enough permissions to start a process. The WebSocket was created to re

Turns out the logs response is a zip file which contains multiple log file entries. We'll get PAT for authorization, fetch and unzip them...

Create a custom operator to run a function on first emission only

This article gives you a number of useful tips when working with Angular forms.

This article explains some ideas behind React hooks and demonstrates principles of this mechanism using simplest implementation possible.

This article dives deep into internals of ngrx/effects class. It explains how entities are put together and how this module is tied to ngrx/store.

We're going to dive into bundle-size and compilation speed insights. Was Ivy project worth waiting for?

Learn how to automatically change themes with the change in ambient lighting conditions in your Angular App. Here's a simple, step by step, and easy to follow article for beginners.

Learn how to implement a Theme Picker from scratch, for your Angular App. This is a beginners guide and you'll get to know the best practices you should follow along the way.

Debugging and inspecting the state of your code is essential in expanding your knowledge and understanding of the language and frameworks you are creating in. We hope that this tool will help you on that journey. Happy Debugging!

Learn how to implement Google Sign-In in your Angular App in under 15 minutes. We'll build an App with routing and Firebase Authentication and follow all the best practices while doing it.

A step by step tutorial. Let’s assume you’ve got some source code hosted on GitHub [https://github.com/join?source_repo=gparlakov%2Fscuri] and you’d like to publish that as an NPM package using Azure DevOps [https://azure.microsoft.com/en-us/services/devops/]. Both GitHub [https://github.com/join?source_repo=gparlakov%2Fscuri]and Azure DevOps [https://azure.microsoft.com/en-us/services/devops/] accounts are free to sign up for and use on open source projects! Here’s high level what this articl

Webpack is somewhat of a black box for most developers. Tools like “create-react-app” abstract most of the bundler functionality away. I did some research into it and began building my own light-weight web bundler to understand more about what it entails.

In this article we're going to dive deep into the internals of @ngrx/store package. We'll examine how state, reducers, store and actions work with each other and where meta reducers fit in.

Let's explore how we can consume diverse Web APIs in Angular application properly by abstracting it into a library built "the Angular way".

How I strongly typed my Angular forms. And you can too using my small library!

Presentational components encapsulate presentation and UI behaviour. They can be stateful or stateless and are connected to the application state through their data binding API.

This article explores the `rxjs-for-await` library by Ben Lesh. Read it to learn about use cases and technical details.

How to lazy load Angular components from a Non-Angular project. Ideal for dynamic websites using CMS platforms.

Learn how to create and consume a custom component harness using Angular CDK. With a step-by-step case study, we run it in unit tests and end-to-end tests.

In this article, you'll learn how to create a library with Angular CLI. Besides, we'll explore how to publish a library and talk about dependencies linking and peer dependencies.

This article describes an experiment that shows why using the SharedMaterial module in all Angular modules is a bad idea that leads to an increased bundle size.

This article explores the patterns in Angular applications that make your code less readable and maintainable, like polluting the ngOnInit or writing useless directive selectors.

Have you ever needed to switch your backend endpoints before building for production? Or has it been problematic to change the endpoint of a resource? It sure happened to me, so I am going to show you how I dealt with this issue. If you just want to browse the final code, you can check it here [https://stackblitz.com/edit/specific-data-services-swqehm]. What is the problem? In our code base we have a general data service, that slightly abstracts the HttpClientService provided by Angular. This

This article will show you how to patch `jest-worker` package used by Gatsby.js and by patching enable child process debugging using Chrome Dev Tools.

Extract workspace libraries to get tiny Angular application projects. We'll create assets, styles, and environments libraries for an Nx workspace. Step-by-step commands and instructions.

If you’re currently considering adding NgRx to your project, or just want to learn, this piece is going to cover the basics of the flux pattern and how to use it.

Dive deep into React's new architecture called Fiber and learn about two main phases of the new reconciliation algorithm. We'll take a detailed look at how React updates state and props and processes children.

Have you ever wondered how is it possible to import CSS into JavaScript files? In this article I'll show you how Webpack does it by transforming your CSS styles into JavaScript.

In this article I want to explain how Angular @Injectable decorator works under the hood and how providedIn property is processed by Angular Ivy.

Module federation allows a JavaScript application to dynamically run code from another bundle/build, on both client and server. This is the JavaScript bundler equivalent of what Apollo did with GraphQL. > A scalable solution to sharing code between independent applications has never been convenient, and near impossible at scale. The closest we had was externals or DLLPlugin, forcing centralized dependency on a external file. It was a hassle to share code, the separate applications were not tru

This article dives deep into techniques to implement Angular View Model as a single observable stream.

An architectural approach to better Angular applications: this article shows you how to keep your Templates declarative and dumb, your Components thin and smart, and your Services fat and happy.

Remember last time you paid on a website with a single touch using Google Pay, Apple Pay or a credit card? Now supposed you need to implement this functionality in an Angular application. Let's see how this can be done.

Angular Ivy makes it pretty easy to lazy load components, but what if we need to lazy load modules. Can we do that? In this article I'll show you why you may need this and how it can be done.

In this article we'll explore internal architecture of Git step by step using practical exercises. We'll see how Git stores content, what is a tree object that underlies a commit and how a branch is just a text file.

In this article we will discuss concepts of shell libraries and how they differ. At the end, we will settle on a shell library pattern and discuss under which circumstances it's useful.

In this article we'll build a very primitive plugin for Webpack and then I'll show you how to find out if this plugin triggers error by debugging Webpack build.

This article describes the Initial Null Problem of AsyncPipe and its root cause, and discusses new asynchronous data-binding to solve that.

In this article I'l show you how to use the powers of reactive extensions tin Angular to efficiently work with the state of components in application.

In this article I explain the idea of recursion and show where it could be helpful. Then I proceed to introduce and explain a number of topics and ideas that will help you when practicing recursive problems.

A light introduction into DOM fundamentals through an insightful quiz. You'll learn how HTML is transforms into JavaScript objects to eventually become part of the Document tree.

A deep dive into ECMAScript (JavaScript) specification and internals of TypeScript compiler. In this first part I'll explore lexical grammar and explain TypeScript's scanner implementation details.

Learn how to boost your Angular application speed by selectively reacting to performance sensitive events. To do that we'll implement a few event plugins and simplify them with decorators.

I'll give an advice on how approach typing in TS and show tricky examples using TS where wrong assumptions might lead your to errors. We'll also explore the connections between types along the way.

This article is a must-read to understand accessibility and how to work with it in Angular. l'll focus on 11 things you can do to make make your Angular app more accessible

I keep being surprised by how reactive Svelte feels. In this article, we take a glance at the Svelte internals to see how Svelte accomplishes this. This is important if we want to use RxJS in Svelte.

In this article we'll explore when and why Angular creates two instances of the same service and what solutions exist to ensure a service remains a singleton in the entire application.

After delving into the @angular/forms package I've been able to get a better understanding of how things really work under the hood. In this article I'd like to share my vision with you. Contents * Base entities [https://indepth.dev/a-thorough-exploration-of-angular-forms/#base-entities] * ControlValueAccessor [https://indepth.dev/a-thorough-exploration-of-angular-forms/#controlvalueaccessor] * Connecting FormControl with ControlValueAccessor [https://indepth.dev/a-thorough-explorat

In this post, we are going to understand how the HttpClientModule actually works behind the scenes and find answers to some questions that might have arisen while using this module. Content * Setting up [https://indepth.dev/exploring-the-httpclientmodule-in-angular/#setting-up] * What is HttpClientModule? [https://indepth.dev/exploring-the-httpclientmodule-in-angular/#what-is-httpclientmodule] * Let's start exploring 🚧 [https://indepth.dev/exploring-the-httpclientmodule-in-angular/

Supporting Internet Explorer as a browser for your Angular 8.x or Angular 9.x application.

To give a little background, at work we're creating an application to schedule the daily rounds of caregivers. This is done in a one-week calendar view for multiple caregivers, typically between 20 and 50 caregivers are being scheduled at the same time. In the calendar view, we have a row for each caregiver, and there's are columns that represent each day of the week. If everything is loaded, we speak about more than 1.500 items in total on the calendar. Besides the calendar, there are several

Angular 9 Ivy provides us with a few more options when defining Provider Scope. In this article we will see why 'root' is not sufficient and how the new value 'any' can help.

In this article I'll explore the mechanics of template checking in Angular. We'll become familiar with ElementSchemaRegistry, its implementations like NO_ERRORS_SCHEMA and its usages.

AOT everywhere, dynamic globalisation, strict mode, Bazel, and much more.

In this article you'll know how to incorporate a single Angular component inside a page using Angular elements. We'll explore how this works in great detail and how to debug the application with Web Components.

AOT, faster tests, stronger types, and component harnesses.

2020 is the year you can help the Angular ecosystem thrive.

How to respond to Angular Ivy in 2020/2021 if you're a library author.

The createAction creator function opened opportunities in the NgRx world. With it came two other creator functions, createReducer and createEffect. Let's take a look at what's so special about it and why it's important.

In this article, we'll iterate over an implementation to introduce multiple independent instances of a NgRx store slice. In an application, these instances can be represented by a tab-like interface. To come to a solution we'll use the Angular Router, NgRx Effects, and NgRx Router Store.

A Static Site Generator is the best way to create blog posts or portfolios. We can quickly set up a blog and deploy it to any cloud provider like Netlify. An important question is what does SSG do?

We have collected the top 15 Angular inDepth articles of 2019.

The Angular Ivy runtime introduces a new concept called component features. Component features are mixins for components. They add, remove or modify traits at runtime.

Learn how you can handle dynamic items size for Angular CDK virtual scroll by providing your own VirtualScrollStrategy.

We start with the comparison of dynamic components functionality in Angular and AngularJS and then continue with main concepts that enable dynamic components to you an extensive overview of the dynamic components functionality in Angular.

The article explores common elements used for DOM manipulation in Angular with a particular focus on ViewContainerRef. Learn why they are needed, how they work and when you need to use which.

This post is going to cover how to build an Angular Project with P5JS. I’m going to walkthrough creating a basic sketchpad, and also discuss some cool things that you can do in your own applications.

The Angular 9 RC is out, what an exciting time to be Angular developer, no I am not saying this because of Angular 9 RC release. It's because Ivy is here, Ivy is now the default rendering engine in Angular.

An in-depth look at why and how we implemented Dependency Injection (IoC) Container in ag-Grid. In the article I also explore the benefits DI brings in web development.

As an Angular Developer, we often focus on using the overall framework. This isn’t wrong since Angular was designed to have a uniform method of building great applications. But let's see the Angular tools you should be aware of.

I remember in the beginning of my programming career I read a great book “Code Complete”by Steve McConnell. There I found a very insightful idea: > “Managing complexity is the most important technical topic in software development. In my view, it’s so important that Software’s Primary Technical Imperative has to be managing complexity. We can’t agree more with this statement at ag-Grid [https://ag-grid.com/]. In just 4 years we built the best JavaScript datagrid in the world. We managed to do t

Last week I was working on an Angular Library, and in all the components we wanted to have encapsulation set to None and changeDetection to OnPush. We also wanted to add all components and directives to exports. Let's see how we can achieve this without writing any code.

Today, I'm taking you along for a journey in game development. We are making it with the classic game of Tetris. We are going to touch upon concepts like graphics, game loops, and collision detection. In the end, we will have a fully functioning game with points and levels. I hope you come back if I let you try out the game: Play the game! [https://focused-mestorf-930f82.netlify.com/] The code for the finished game is on GitHub [https://github.com/melcor76/ng-tetris]. Tetris Tetris was create

Building a robust component architecture.

We got many new features with the release of Angular 8, Angular 9 will be released around November 2019. There are a lot of interesting things happening after Angular 8 was released in May, we have Ivy as default, ng deploy is officially support by CLI and many more.

> AngularInDepth [https://medium.com/angular-in-depth] is moving away from Medium. This article [https://indepth.dev/insiders-guide-into-interceptors-and-httpclient-mechanics-in-angular/] , its updates and more recent articles are hosted on the new platform inDepth.dev [https://indepth.dev/] As a good developer, you always notify the end-user about the current status of an application by showing either loading indicator or error message. Async Pipe Using async pipe is quite common scenario in

This article will teach you what you need to know to successfully implement multi-language Angular applications rendered server-side.

This article describes my experience tuning up angular application using a few common and a few lesser known techniques related to change detection. Doing so helped me learn how change detection in Angular works under the hood.

Ivy engine has brought (and also will bring) a huge amount of new features. Honestly, I always dreamed of having an opportunity to load modules asynchronously, and most importantly, components, you can do that with one line of code in Vue: Vue.component('lazy', () => import('./lazy.component')); For sure we could lazy load any non-routable module by adding it to the lazyModules property in the Angular’s config and then override NgModuleFactoryLoader token with SystemJsNgModuleLoader, but thi

Builders API is released with Angular 8, and it offers a functionality where you can override commands as ng build,ng test and ng lint . Not to be confused with Angular Schematics here, by using which you can add your own commands for ng generate commands or provide support for ng add .

Let's explore how to implement our own Event Manager Plugin to optimize event handling. Then I'll show how to use it to automatically prevent default action and event propagation.

In this post I will be building out an API with Google’s Firebase. I will be building out the back-end with Firebase Cloud Functions and ExpressJS.

Creating framework-agnostic components with Angular Elements In this article, I use Nx to create a monorepo with applications in Angular and React, and a library with Angular Elements. Then we consume these custom elements and communicate with them in our apps. Here’s what we create in this article: The application we create has one page for Angular and one for React. The add button and shopping cart are Web Components made with Angular Elements. There is no state between the pages. The main

This article reveals the topic of functional Components with things called Hooks, and Computeds. In addition, it is about a recent Vue RFC. Things like observable data and explicit dependency declarations.

The things you may not pay attention to but they are good to know.

The Angular framework was designed with flexibility in mind. That approach allows Angular applications to be executed across different environments — browser, server, web-worker, and even mobile devices are possible. In this series of articles, I’m going to reveal to you how does it even possible — execute Angular applications across different environments. Also, we’ll learn how to build custom Angular platform which renders applications inside the system’s terminal using ASCII graphics. Artic

The Angular framework was designed with flexibility in mind. That approach allows Angular applications to be executed across different environments — browser, server, web-worker, and even mobile devices are possible. In this series of articles, I’m going to reveal to you how does it even possible — execute Angular applications across different environments. Also, we’ll learn how to build custom Angular platform which renders applications inside the system’s terminal using ASCII graphics. Artic

Beware what enabling full template type-checking in Ivy will bring us. > AngularInDepth [https://medium.com/angular-in-depth] is moving away from Medium. This article [https://indepth.dev/insiders-guide-into-interceptors-and-httpclient-mechanics-in-angular/] , its updates and more recent articles are hosted on the new platform inDepth.dev [https://indepth.dev/] In this article, I will dive into Angular type-checking system, show how it’s done in ViewEngine and also highlight the latest featur

In this article we'll explore how Angular type-checks templates, review the difference between View Engine and Ivy type-checking and break down the process of finding and understanding generated type-checking code.

The Angular framework was designed to be a platform independent. That approach allows Angular applications to be executed across different environments — browser, server, web-worker, and even mobile devices. In this series of articles, I’m going to reveal to you how does it even possible — execute Angular applications across different environments. Also, we’ll learn how to build custom Angular platform which renders applications inside the system’s terminal using ASCII graphics. Articles: *

Small gotchas from my (and not only my) Angular experience.

Have a long initial page loading time? check this out. Have your web app ever been complained about taking too long to load? Have you ever been given a task to “optimize performance” of the slow app? There are tons of topics about improving your app’s performance, such as lazy loading, change detection, server side rendering, etc. One of the topic I want to talk about here, is optimizing Angular bundle size. It’s extremely easy and useful. Step 1: Know your Bundle Size It’s hard to deny that i

Refactoring the zippy application using SCAMs.

What is the best scalable architecture for Angular applications? This is a difficult question. If you search for “scalable Angular applications”, you will find a lot of articles that have a lot in common. I will try to summarize the most important points, list weak points and afterwards suggest my architecture variant. The main design recommendation is to introduce an additional layer between component and service classes. It is normally called “Abstraction” or “Facade” layer. Article writers s

Adding customization to existing RxJS functions.

Cypress is an Open Source JavaScript testing framework. Cypress enables e2e, integration, and unit tests in your projects. The e2e features of Cypress are what get the most attention currently, because of both the quality of the experience and the large amount of benefits it provides.

Do you know the burden of handling your RxJs subscriptions manually? Did you ever forget one? Wouldn't it be nice if we never have to think about subscriptions again? Let's explore the options in this article.

Or how my dreams of writing a game started by animating a square block I love playing games. And I love coding too. So, one day, I got thinking, why not use those coding skills to make a game? But it sounds hard. How would one even get started? > With baby steps. First, we need some 2D graphics. In this case, it’s moving some blocks on the screen. So, in this article, I will show how to draw and animate objects using the HTML5 Canvas [https://www.w3schools.com/html/html5_canvas.asp] and JavaS

In this blog, let’s see what we should expect from the Angular 8 release. This post will cover some hot topics covered at ngConf and Google I/O 2019. So if you missed both events, do readon to have an idea what features your favorite framework is going to offer you. This blog is co-written with Roman Yavoriv [https://medium.com/u/2fd215b5b80a?source=post_page-----1bf187c8f0bf----------------------] . Introduction I am sure you are also excited the same way I am after NgConf 2019, and eagerly aw

This article will give you a better understanding of how Angular split your code into chunks. If you are scared from Angular CLI output showed above or if you’re curious how that code-splitting actually happens then this post is for you. Code splitting allows you to split your code into various bundles which can then be loaded on demand. If used correctly, can have a major impact on load time. Contents 1. Why should I care? 2. Angular CLI code-splitting under the hood 3. Simple Angular App

Update: Try Ivy jit mode https://alexzuza.github.io/ivy-jit-preview/ 👈 -------------------------------------------------------------------------------- Let’s see what Angular cooks for us Fan of Angular-In-Depth? Support us on Twitter! [https://blog.angularindepth.com/fan-of-angular-in-depth-and-my-writings-support-us-on-twitter-e3bfcbabb4b1] > Disclaimer: it is just my learning journey to new Angular renderer The Evolution of Angular View EngineWhile new Ivy renderer is not feature compl

When web applications are properly designed and coded the users of assistive technologies can use them easily. However, we’re not always paying enough attention to the a11y issues. One of the reasons is that it may require significant efforts to make applications accessible. Luckily, there are tools that can speed up a11y development for our Angular applications. A number of powerful tools are distributed within @angular/cdk package. One of the issues the Angular CDK can help us with is keyboa

In the process of building my application, I used Firebase Cloud Functions that are called by triggers in the Firebase Cloud Firestore. Basically, whenever a record is written to specific collections in my app’s Firestore, the Cloud Functions trigger Slack notifications.

In this post, I’m going to define what a JAM stack is and walk you through how I used it to build a learning app recently. I’m going to showcase a few key areas where the JAMstack greatly improves the development experience, and takes a lot of the work out of maintaining applications.

Or how to enliven dead Observables…and why

Leverage Cypress for End-to-End testing In this article, I show how to use Cypress to run end-to-end testing with your front-end. I write multiple tests that simulate user behavior like registering and logging in a user. I explain how Cypress handles network requests and what features Cypress has to help us debug failing tests. And most importantly, I show that end-to-end testing can be fun. > Disclaimer: I clone an Angular project to run the tests, but the article does not contain any code spe

Create components and directives for manual tests.

Learn the ins an outs of Angular dependency injection in automated tests.

Automate component library releases through commit conventions Release new versions of your code using tools like Lerna and Commitizen. By using commit conventions we can automate the versioning and get great looking changelogs. Scenario: We need to release component libraries to npm because we want to consume them inside our Angular applications. We want to be able to release the components independently. Furthermore, we have some dependencies between the libraries. Does this sound complicat

The first Angular In Depth conference is coming up.

By visualizing your UI component library both developers and designers become more productive. In this article, I first describe how to build a component library with Angular CLI. After the library is done, I write some stories in Storybook to test and document the UI components. Storybook [https://storybook.js.org/] is a UI component explorer [https://blog.hichroma.com/the-crucial-tool-for-modern-frontend-engineers-fb849b06187a] that visualizes components in different states. Storybook enable

HTTP caching simply means the browser stores local copies of web resources for faster retrieval the next time the resource is required, thus reducing the number of server calls. The aim of this article is to show how you can implement caching with only two RxJS operators: publishReplay() and refCount(). When you search for RxJS caching, you’ll most likely find articles, forums, and discussions that recommend either shareReplay() or publishReplay() with refCount(). In short, shareReplay() is s

Understanding when and why to use npm peerDependencies In this article I hope to clarify what npm Peer Dependencies are and especially when you should use them. Peer Dependencies are listed in the package.json file in the peerDependencies object. To get the most out of this article you should have at least an introductory understanding of npm [https://www.npmjs.com/]. Contents In this article: 1. We will compare exactly how Dependencies work versus Peer Dependencies. 2. We will look at so

By using Angular CLI, NgRx feature modules and a bit of manual work:-)

NgRx is an open source library that provides reactive state management for your Angular applications. Inspired by Redux, NgRx provides a way to maintain...

Should these states be part of NgRx Store to begin with? TL; DR: It depends… However, we’ll look into the pros and cons of different approaches. If you chose to make the loading/error as part of the state, make sure they are encompassed within a single property. Does handling multiple interconnected properties that represent the same AJAX call ✨spark joy✨? If not, then it’s time to let them go and use a single property insteadNot so long ago Michael Hladky started a very interesting discussion

This articles explains how to writ unit tests for components with @ViewChild decorators using a stub component

Find out which superpowers you can start using today > Just like Batman develops his gadgets we can use interceptors to gain superpowers. There are many ways to use an interceptor, and I’m sure most of us have only scratched the surface. In this article, I will present my ten favorite ways to use interceptors in Angular. I have kept the examples as short as possible. And I’m hoping they will inspire you to think of new ways to use interceptors. This article is not about teaching interceptors

In this article, we will talk about how we can leverage Angular CLI build tools to create an AOT precompiled Angular plugin, which can share common code with other plugins and even work with Angular universal. This is an unofficial solution, but it works well for our case. > AngularInDepth [https://medium.com/angular-in-depth] is moving away from Medium. More recent articles are hosted on the new platform inDepth.dev [https://indepth.dev/angular/]. Thanks for being part of indepth movement! Her

Do you have a deeply nested data structure? Do you have to build a form around it? Is this form really slow to work with? Are your users complaining about it? Do you need an escape? WAIT! I’m here to guide you home. TL;DR: 1. Analyze a reactive form to identify the scopes for refactoring. 2. Modularize the code by refactoring for better separation of concerns. 3. Refactor the way the Reactive Form is generated in TypeScript. 4. Identifying the source of performance lag. 5. Enhance the perf

A short while ago I published an article [https://blog.angular.io/nebular-meets-angular-cdk-b83fc921d6b2] about the integration of Angular CDK in Nebular [https://github.com/akveo/nebular] — full-featured library for Angular applications we’re developing at Akveo. During the development, we’ve faced a bunch of interesting puzzles that Angular CDK has helped us to overcome. That’s why I decided to start a series of articles on challenges Angular CDK may aid you with. To start with, let’s build

NgModule is arguably one of the most confusing Angular concepts.

As much as I like frameworks, I'm also a big fan of the native web platform, especially web components. I look forward to the times when the implementation will be powerful enough to solve the common problems in web development. And we're getting closer. In this article I want to take a look at the most exciting features that soon can be part of the web platform and will make web components a lot more powerful. But before I do that, I want to spend a little time to explain the concept of a pla

Or how the ‘groupBy’ operator works under-the-hood.

An introduction to using enum’s in JavaScript and TypeScript This article is an introduction to enumerated types or enum’s in both JavaScript and TypeScript. Unlike TypeScript, JavaScript doesn’t directly support enumerations. So we will look at a way to get some of the benefits of enumerated types in JavaScript. The Theory In programming languages we typically use enumerations to describe finite sets of discrete values. Discrete Values When we talk about discrete values we mean values that a

The following post is going to give a high level view of the AngularFire library, and how it works under the hood. I’m going to walkthrough a simple grocery list app I wrote, and show how using AngularFire makes things seem to work like magic.

A less technical and more conceptual in-depth overview of React Suspense and our mental model of loading states.

> “To expect the unexpected shows a thoroughly modern intellect.” — Oscar Wilde This article is about centralizing error handling in Angular. I discuss some of the more common topics such as: * client-side errors * server-side errors * user notification * tracking errors I present some code snippets during the way and lastly provide a link to the full example. Spanish version: * Esperando lo Inesperado — Buenas prácticas para el manejo de errores en Angular [https://medium.com/@

In this article, we’re going to examine a new Angular NodeInjector which heavily uses a bloom filter to retrieve a token. We’ll take a look at: * How the NodeInjector looks like * How Angular builds bloom filter for NodeInjector and when we can catch false positive values * What’s the resolution algorithm for resolving dependencies in NodeInjector Introduction The NodeInjector is one of the two new types(another one is R3Injector [https://github.com/angular/angular/blob/d83307adab10ab447

Tree-shakable dependencies are easier to reason about and compile to smaller bundles.

A quick overview of Angular 7 typescript transformers Typescript added support for custom transformers in 2.3 version. This type of extensibility allowed developers to go beyond the scope of the base compiler. After that, almost everyone, who had a project with typescript compilation, wanted to turn his ideas into reality. Angular also could not stand aside. The first pull request on switching to transformer based compilation was born on 10 Jun 2017 [https://github.com/angular/angular/pull/173

This article explains the difference between applying an asyncScheduler as an argument and passing it to the observeOn operator

Should Angular CLI options be in camel case or in kebab case? Angular CLI supports options for commands. For example: ng build --prod But, for these options should we use camelCase or kebab-case? Well, it turns out that the Angular CLI documentation is rather ambiguous about how you should write these command line options. In this article we will try to sort out this inconsistency and also have a little fun while we are at it. Because hey! How often do you get a chance to read an article with

> This series is just my notes as I read through the RxJS sources. I’ll provide a summary of the main points at the end of the article, so don’t feel too bogged down with the details. Welcome back. Today I’m very excited, because I’m finally going to dig into how pipe is implemented in RxJS. This article will start with an overview of how map and pipe work, and then will delve into the RxJS sources. Previously In the last article [https://medium.com/angular-in-depth/how-to-read-the-rxjs-6-sourc

In this post, we will see how to implement nested reactive forms using composite control value accessors(CVAs). Kara Erickson [https://twitter.com/karaforthewin?lang=en] of the Angular Core Team presented this approach at the Angular Connect 2017 [https://youtu.be/CD_t3m2WMM8]. Three Ways to implement nested forms: We will see the most commonly used techniques to implement nested forms. 1. Sub -Form Component Approach (providing ControlContainer) It is built differently for template and reac

Ben Lesh has a terrific article called “Don’t Unsubscribe” [https://medium.com/@benlesh/rxjs-dont-unsubscribe-6753ed4fda87], telling you why you are better off not explicitly unsubscribing, but instead relying on constructs that cause the unsubscriptions to happen. In that spirit, I wanted to title this article “Don’t Even Subscribe”, but the truth is, there are a few places where you have to subscribe, so I settled for the less-emphatic title you see. When should you subscribe? The answer to t

This is the story behind AngularInDepth and inDepth.dev. It recounts obstacles I’ve gone through, emotions I had to face, people who helped me and lessons I’ve learned along the way.

If you’ve done anything in web development in the past year, you’ve undoubtedly heard of CircleCI and Firebase.

The how and why of using the --create-application flag with Angular CLI to create a Workspace without the initial application A nice addition to Angular CLI 7.0.0 was the --create-application flag. In this article I will discuss how and when to use this new feature. It will be especially useful when creating Angular libraries. NOTE: Angular CLI accepts both camelCase and kebab-case for this option. So, anywhere you see --create-application, you can also use --createApplication. For more detail

With PR #25740 [https://github.com/angular/angular/commit/b7baf632c0161692f15d13f718329ab54a0f938a] all navigations performed by Angular’s router are merged into a single, observable stream. There can also be only one active navigation at any time. This provides the benefits of making navigations faster and more predictable. Although these changes are mostly internal, they do affect how we should think about navigations and routing in our applications. > This is a major refactor of how the rou

This article uses a basic setup with a parent and children components to demonstrate internal processes in Fiber architecture React relies on to propagate props to child components.

Some new features have been added to the Angular Router with version 7.1.0 [https://github.com/angular/angular/commit/bf71b107b3227e183f96b991700fbaeb8337ef2f] : * Router guards can now return a UrlTree. This allows a guard to cancel the current navigation and redirect to the URL represented by the UrlTree. * There is now a notion of “guard priority”, which is used as a tie-breaker when multiple guards return a UrlTree during a single navigation. * A new configuration option for runGua

This article describes the use case that results into common ExpressionChangedAfterItHasBeenCheckedError and uses it to explore change detection mechanism and related internal implementation details in depth.

In this article, we will learn about and take a good look at how to use the Drag and Drop tool in the Angular Material Development Kit. Angular is JavaScript (TypeScript) framework for building web applications, mobile or desktop with over 42,000 ⭐️ on GitHub. It is maintained by the Angular Team at Google and a host of community members and organizations. Angular Version 7 was released few weeks ago. One of the features it shipped with is the Drag and Drop tool in the Component Development Ki

Learn tactics for testing RxJS observables and application state commands. Opt out of Angular testing modules for blazingly fast unit tests.

Most of the web apps I worked on so far, had a design where different pages are using common layout. For example layout which consists of header, footer and sidebar, which are fixed for each page, and the content which varies by the page. Logical idea is to try to extract and reuse common parts. Based on the Angular docs, Pluralsight courses and other materials I found, I came up with two possible options. To better explain those options, let’s first define example project. Example Project Let’

Lazy load your locale when changing countries. The other day I read Using TypeScript Dynamic Imports in Angular [https://netbasal.com/using-typescript-dynamic-imports-in-angular-d210547484dd] by Netanel Basal [https://medium.com/u/b889ae02aa26] where he says: > TypeScript 2.4 added support for dynamic import() expressions, which allow us to asynchronously load and execute ECMAScript modules on demand. This sounded like something I had to try! I already had the perfect use case from my pr

Container components are extracted from mixed Angular components to increase the maintainability, testability and scalability of our Angular apps.

Dust off the history books and discover the origins of the MVP pattern.

This article uses NgDoCheck and AsyncPipe to dive deep into manual control of change detection in Angular and explains what effect each method can have on performance.

Lazy loading is a useful technique for faster initial page loads. With lazy loading, your application loads faster by shipping only the essential startup code to the browser. Other code is placed inside of feature modules, which are loaded on demand. The basics of how to use lazy loading is explained well in the official docs [https://angular.io/guide/lazy-loading-ngmodules]. In this article, we’ll go under the hood and check out how the router implements some parts of lazy loading. Topics 1

Manage complex Angular applications with the MVP design pattern.

RxJS is my favorite library. I love how observables offer a declarative, composable twist on async (and sync )programming. Now that I finally understand how to model events as streams, I don’t ever want to look back. For me, RxJS is just downright fun. But the sources have always remained something of a mystery to me. I’ve written a small series on how to build your own observable [https://medium.com/@natelapinski/learning-observables-part-1-arrays-14480816eb61] from scratch. If you want to un

Routing is essential for any frontend framework or library. It makes single page applications possible by letting us load the application once, and display different content to the user through client-side routing. It’s easy enough to get started with Angular’s router, but have you ever wondered what really happens when you click a link in an Angular application? In this article, we’ll answer this question and more. A lot of insight into Angular can be gained through an understanding of the rou

Dive into change detection by learning the problems it solves and studying basic implementation with browser API. Then go through implementation details of change detection in Angular and React for complete understanding.

This article explores the main the work loop in React’s new reconciler implementation called Fiber. It compares and explains the differences between browser's call stack and the implementation of the stack in React's Fiber architecture.

I’ve heard that Angular Material had a new drag and drop CDK in their upcoming version. Now with the first Angular and Angular Material release candidate being released, I think it’s time to explore some of the new stuff. I’m really looking forward to this and I’m assuming you’re too, so let’s not waste any time and let’s get started. We’ll start of with a simple example and build our way up to a simple task board. A simple example Let’s start by exploring the API with the simplest example I ca

CSS Flexbox and CSS Grid are very powerful layout functions. These are already supported by all modern browsers except for IE 11. Unlike properties for styling (for examplecolor and border), these are properties for building a layout structure. In other words, it is not used to beautify the surface of HTML elements but is used to create a foundation of application UI in cooperation with the hierarchical structure of HTML elements. In Angular, it is common for a view of a component to be divided

Welcome back. In the previous article [https://indepth.dev/building-your-own-observable-part-3-the-observer-pattern-and-creational-methods/] , we looked at RxJS’s take on the Observer pattern, and created our simple Observable class. We also added some functions for creating observables from data streams, such as of, from, and fromEvent. If you’re new to this series, I recommend familiarizing yourself with the previous installments: * Part 1: Arrays [https://indepth.dev/build-your-own-observab

You can play around with the above ROUTES at this stackblitz. [https://stackblitz.com/edit/router-pillar1-demo-final] Our first task is to understand how the router handles URLs internally. -------------------------------------------------------------------------------- Urls and UrlSegmentGroups Let’s start by understanding the different parts of a URL, and how they are represented internally by the router. Consider the following simple URL: In the introductory article for this series [htt

In this short article, we’re going to explore secondary outlets [https://angular.io/guide/router#secondary-routes] (sometimes called named router outlets), and see the role they play in routing. By the end of this article, you will understand: * how to define secondary outlets * why secondary outlets are used * the effect that they have on the structure of a URL * how they are routed and activated Creating Secondary Outlets As discussed here [https://indepth.dev/the-three-pillars-of-angula

Most popular tecjnologies in 2020- most controversial topics. This article won't provide you with the best solution. it will highlight, clarify nisconceptions.

The Angular router [https://angular.io/guide/router] is a marvel of software engineering. From handling application navigation to enforcing route guards and facilitating lazy loading of modules, Angular’s router is indispensable for most applications. However, for many developers, the internal workings of the router remain a mystery. This series aims to change that, by giving you, the developer, a deeper understanding of the router. This introductory article will provide an overview of the route

In this article we'll see how to share Angular library with the world by publishing it on npm. We'll review how to name the library, specify its version and what to do with read-me and license Files

This article demonstrates on practice how to apply guidelines and principles of successful reverse-engineering to break down and understand React's fiber functionality from the ground up.

This article explains the reasons to start reading sources. It describes the knowledge and tools you need to do it successfully. And it also outlines a structured process to start reverse-engineering.

Configuring Angular CLI to leverage Headless Chrome for Unit and E2E tests Headless Chrome [https://developers.google.com/web/updates/2017/04/headless-chrome] is a useful tool for running automated tests in environments where it isn’t practical to actually launch a browser. In this article we explain how to configure Angular CLI [https://github.com/angular/angular-cli/wiki] to run your Unit and E2E Tests using Headless Chrome. This will become important for our upcoming set of articles in The

Welcome to part 3 of the series [https://medium.com/@natelapinski/learning-observables-part-1-arrays-14480816eb61] . In this installment, we’re going to look at RxJS’s take on the Observer pattern, and start implementing an observable from scratch. Our humble Observable will be nowhere near as sophisticated as what’s going on inside of RxJS, but it will give you a good enough understanding of observables so that you can start digging into the RxJS source code [https://github.com/ReactiveX/rxjs]

Welcome to part 2 of this series on building your own observable. If you haven’t already checked out part 1 [https://medium.com/@natelapinski/learning-observables-part-1-arrays-14480816eb61] of this series, please do so. It covers a lot of foundational material on Arrays that will come in handy here. In this short article, we’ll spend a little more time building up an intuition for what observables are, and why we even need them in the first place. With the proper background and mindset, the c

In this article I"ll show you how to leverage Angular application environments to pass configuration settings to your application.

Angular uses RxJS observables. I can’t understand something until I create it with my own hands. Perhaps you are the same. Either way, let’s build an observable from scratch! When I first started working with RxJS, I didn’t know what I was doing. Now, I’m able to solve problems using observables, and I can even read the RxJS sources with confidence. It’s definitely something you can do too. The only catch is, to understand observables, you have to first understand arrays. Arrays We’ll see pre

You're probably only using ngrx/effects to handle the communication to an external source by triggering an effect with a NgRx action.

In this article we will explore what happens when we build our library, package our library using npm pack. We'll also see how to actually use our library in a separate application.

This article dives deep into mechanics of @Host decorator in Angular. It introduces rarely seen notion of Element Injector and shows how it's used alongside the decorator to retrieve dependencies.

Retrying on errors is a common practice, and RxJS has built-in operator for that. But what if we need to retry with exponential backoff strategy? Or have a better control when to retry? backoff-rxjs library has the answers.

This article takes a close look at what happens when you run "ng new", explores the notion of a workspace and library modules and shows how they can be used in Angular application.

This article discusses locality and tree shaking as a driving factors for the introduction of Ivy. It then continues to shed some light on the new runtime, compilation and change detection processes.

This article explains a clever optimization techniques that could be applied to scenarios where ngFor is commonly used. You'll learn what is an embedded view and how to re-use it instead of destroying on each iteration.

In this post I will attempt to explain how to use hammerjs [https://hammerjs.github.io/] gesture recognizers provided by the @angular/platform-browser [https://github.com/angular/angular/tree/5.2.9/packages/platform-browser] package. I’ll be referencing @angular/platform-browser@5.2.0 within my code samples, but there are some changes coming to 6.0.0 that will be discussed later. Background If you are working on a mobile project that requires gestures, hammerjs [https://hammerjs.github.io/] h

Getting your Angular Router application actually working in a non-root folder on Internet Information Services The Angular Router [https://angular.io/guide/router] is a fantastic module for Single Page Apps. However, to deploy it in a Production scenario you will typically need to do some configuration to make it work. This article details the steps necessary to deploy an Angular Router application anywhere on Internet Information Services (IIS). Here is a quick overview of what is covered in

If you didn’t dive deep into angular dependency injection mechanism, your mental model should be that in angular application we have some root injector with all merged providers, every component has its own injector and lazy loaded module introduces new injector. But maybe there is some more you should be aware of? Also a while ago, so-called Tree-Shakeable Tokens [https://github.com/angular/angular/pull/22005] feature was merged into master branch. If you are like me, you probably want to kno

I consider myself an active StackOverflow [https://stackoverflow.com/] user, despite my activity tends to vary depending on my daily workload. I enjoy answering questions with angular tag and I always try to create some working example to prove correctness of my answers. To create angular demo I usually use either plunker [https://plnkr.co/] or stackblitz [https://stackblitz.com/] or even jsfiddle [https://jsfiddle.net/]. I like all of them but when I run into some errors I want to have a litt

This post and the code for it was a team effort, including my teammates Zack Ream [https://twitter.com/ZackReamDev], Ryan Kara [https://twitter.com/RyanLKara], Ben Kindle [https://twitter.com/literalpie], and Jason Lutz. The code below was also inspired by the work of George Kalpakas [https://medium.com/u/5feb79ad7844?source=post_page-----92a3c69bcd28----------------------] , from PR#18428 [https://github.com/angular/angular/pull/18428]. When moving from a multi-page application to a SPA, one

Dive deep into internals of the HttpClient's interceptors mechanism. We'll build middleware chain for interceptors from the ground up and explore observable stream of HttpEvents and the need for immutability.

Do you know if Angular first checks siblings of the current component (breadth-first) or its children (depth-first)? This article demonstrates that the answer depends on what operations of change detection you consider.

In this article you'll find dynamic visual explanations for the most popular RxJS combination operators such as mergeMap, forkJoin and others. The article also describes use cases and termination conditions for each operator.

In this article I'll explain in great detail why 0.1+0.2 IS NOT equal to 0.3. We'll dive into the mechanics of floating points, explore how numbers are stored according to IEEE754 and learn some binary math.

This article explains the essence of unidirectional data flow in view layer in Angular. It also describes the difference between unidirectional data flow in service and view layers.

This article explains why and how Angular implements NgZone over zone.js library. Read to learn how the framework can be used completely without zone.js and when automatic change detection can fail.

This article is a list of articles related to change detection that you need to read to become an expert in change detection. It also offers an extra list of articles aimed at dispelling common confusions.

This article explores the difference between Constructor and ngOnInit lifecyle method in Angular. We'll explore JS/TS language nuances, the component initialization process and how both are supposed to be used.

From the article you'll learn about public API zone.js exposes and the mechanism of task association. You'll become familiar with interception hooks that can be used to track events and measure time.

Dive deep into the implementation details of the ControlValueAccessor that acts as a generic mechanism between Angular’s formControl and a native/custom form control and learn how it works and how to use it correctly.

This article explains how pure Angular pipe is related to pure functions, what advantages pure pipes brings and how it's implemented under the hood.

Series This post is part of the HttpClient API series: 1. The new Angular HttpClient API 2. Testing with the Angular [https://medium.com/netscape/testing-with-the-angular-httpclient-api-648203820712] HttpClientTesting [https://medium.com/netscape/testing-with-the-angular-httpclient-api-648203820712] API [https://medium.com/netscape/testing-with-the-angular-httpclient-api-648203820712] The HttpClient API was introduced in the version 4.3.0. It is an evolution of the exist

In this article I'll explain in great detail when is ngDoCheck triggered which will make it clear why ngDoCheck lifecycle hook is still triggered for a component that implements OnPush change detection strategy.

The article dives deep into inner implementation of module system in Angular. Then the author uses the discovered knowledge to shed light on common confusions related to Angular modules.

This articles explores in-depth the mechanism of forwardRef, explains what it is and how it works and shows why often it's redundant. Read this article to learn where to use forwardRef correctly.

Official Angular documentation states that to bootstrap an application you have to put the following in the main.ts file: platformBrowserDynamic().bootstrapModule(AppModule); The first part of the statement platformBrowserDynamic() creates a platform [https://angular.io/api/core/PlatformRef]. Angular docs describe the platform as: > the entry point for Angular on a web page. Each page has exactly one platform, and services (such as reflection) which are common to every Angular application run

As you know, I love Angular, and all the magical things you can do with it [https://medium.com/@urish/ngvikings-beacons-and-fun-with-web-bluetooth-5f2b1bdfff19] , and I thought it would be an interesting challenge to take a peek into the compiler in Angular 4, try to reverse engineer it, and simulate some part of the compilation process. Working through the compiler was a great experience, and I turned a lot of what I learned into my talk at ng-conf 2017: DiY Angular Compiler [https://www.youtu

This article explains the underlying causes of the error and the mechanism by which it’s detected, provides a few common patterns that may lead to the error and suggests a few possible fixes.

This article takes a close look at one of the main operations during change detection - bindings update. You'll learn what internal structures are used to update props on directives and DOM elements.

In this article you'll learn how Angular represents components and directives under the hood and will become familiar with the notion of a directive definition.

DOM updates is part of Angular’s change detection mechanism. This article explores how the rendering part of change detection works and introduces the UpdateRenderer function.

ViewContainerRef can usually only be used after ngAfterViewInit hook. This article shows how to get access to ViewContainerRef earlier using a directive instead of template reference and ViewChild query.

Let's take a look under the hood of the component decorator mechanism in Angular. We'll learn how it works in JavaScript, why Angular uses it and how to implement a custom one.

Web developers need to debug a lot. In this article I'll demonstrate the approach I use when debugging source code in IDE and a browser console. We'll also look at debugging API provided by Angular.

From this article you'll learn how to use APP_INITIALIZER token and bootstrapModule to hook up into Angular's initialization process.

ES6 introduced a new iteration mechanism for traversing data and corresponding protocols that define a uniform approach to iterating structures in JavaScript. This article describes it.

From this article you'll learn how digest loop from AngularJS evolved into change detection mechanism in Angular. I'll explain why digest was needed in the first place and lifecycle methods correspond to the watch function.

Here we review in great details all operations performed by Angular during change detection, explore implications and take a close look at change detection API in the form of ChangeDetectorRef.

This article explores in depth essential TypeScript configuration options. We'll learn how to configure input and output files location, file types, transpiling and module resolution process.

We are all familiar with rounding numbers in decimal system. This article will teach you how to round binary numbers and explain the math behind it.

Usually signed integers are stored as two’s complement. However, exponent in IEEE-754 floating point standard is stored as offset binary. This article explains the inner workings of this mechanism.

This article explains the very basic math behind four simple algorithms to convert binary to decimal: two for integer and two for fractions.

This is a data schema stub for Gatsby.js and is not used. It must exist for builds to function