We have a date picker component in our application. We send an event each time a user changes the date to our analytics provider. We have one use of it so far, so the analytics code was inside the component that uses it:

However, now we have more places where we must use this code, and we don’t want to duplicate it everywhere. One might think that the logic could be incorporated into the date picker component and passed as input:

Indeed, that would work, but it’s not the ideal design. Separation of concerns means that the date…

In most cases, a feature flag is used when creating a new version of an existing page rather than adding multiple conditions to our code. When this is the case, we usually prefer to use the same URL for both versions.

Let’s examine how Angular Router can be used to get this done. If we take a quick look at Angular’s source code for the following line:

We’ll see that Angular provides the routes we pass to the ROUTES multi provider:

In that case, we’ll be able to provide it manually and use DI as well:


Creating a new project using the Angular CLI generates by default environment files with one boolean property named production.

Many developers take it for granted, but using a boolean in this case isn’t the best choice. In real life, we have multiple environments. It can be local, staging, QA, and production for some applications, or like in our case, multiple serverless environments.

There is functionality such as analytics that we want to run only in production. And there is functionality such as enableProdMode(), error logging, permissions, etc., that we also want to run in our other environments.

For that reason…

In our application, we have created a multi-select component. In most cases, we use the default design and functionality. There is a particular case where we need to show key-value options in our multi-select component, and we use it in multiple places across the application:

By default, Angular uses the emulated encapsulation strategy to make the component styles encapsulated. This means that if we want to override a component style from our parent, we need to use the ::ng-deep selector. For example:

The above works, but I’m not a big fan of this approach.

Angular v12.1.0 introduces a new experimental option to make subsequent builds faster by leveraging the Webpack’s filesystem cache feature and use it for the generated modules and chunks.

To enable it, we can set the NG_PERSISTENT_BUILD_CACHE=1 environment variable before running the ng serve or ng build commands:

After running the command, you should see the .cache folder inside your node_modules:

In this article, we’ll learn how we can type the context object when creating custom structural directives. Let’s create a structural directive that provides the same functionality as the async pipe. It’ll get an observable, subscribes to it, and expose the next value via context:

We’ve created a structural directive that does nothing 😄. We skip the implementation because it’s not relevant to this article. You can learn about it in one of my previous articles.

Now let’s use it in the template and see that its context is typed as any:

One of my colleagues recently asked me a question — I’m consuming an onPush component, let’s call it FooComponent, and passing an inline object to one of its inputs:

Angular runs a change detection cycle for the AppComponent. Does Angular create a new object, forcing the FooComponent to be checked?

Well, it depends. In our case, when Angular compiles the template, it notices that our object is static, and it doesn’t use any bindings. Therefore, Angular will create it once, cache it, and always return the same reference on subsequent checks.

If we take a look at the compiled…

The Angular Router module provides the routerLink directive that takes a string or an array of path segments representing the address to which we want to navigate . For example:

For small applications with one or two pages, we can get away using this approach. But for large applications, which are heavily routed, where we can navigate to the same location from many places, it won’t hold water.

Let’s create a checklist of what we expect our solution to feature:

  • We want to have a single source of truth for each path in the application.
  • We want typings ⭐️

One of the recent requirements in our application was to create a dynamic actions menu component that takes a list of actions and displays them inside a popover.

The component can be rendered multiple times, as part of different views. One of the views is a cell renderer inside our grids. In such a case, we need to run some specific functionality when we toggle the visibility of the menu. One way to solve this is to use an input that will indicate if we’re in a grid context:

I’m skipping the implementation of the component because it’s not…

Netanel Basal

I'm a Frontend Tech Lead at Lumigo, blogger, open source maintainer, creator of Akita and Spectator, Husband, and Father.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store