Maintaining Separation of Concerns Through Angular Directives

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…

Conditionally Load a Module Using Angular Router

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…

On Angular’s Default Environment Files and How You Can Make Them Better

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

Leverage Angular’s Element Injector to make DRY Inputs

In our application, we have created a multi-select component. In most cases, we use the default design and functionality. There is a…

Go Deep or Go Home: a Better Way to Affect Descendant Component Styles in Angular

By default, Angular uses the emulated encapsulation strategy to make the component styles encapsulated. This means that if we want to…

Make Your Build Faster in Angular v12

Angular v12.1.0 introduces a new experimental option to make subsequent builds faster by leveraging the Webpack’s filesystem cache feature…

Typing the Context Object in Angular Structural Directives

In this article, we’ll learn how we can type the context object when creating custom structural directives. Let’s create a structural…

What Happens When You Pass an Inline Object as Input to an Angular OnPush Component

One of my colleagues recently asked me a question —  I’m consuming an onPush component, let’s call it FooComponent, and passing an inline…

Best Route Forward — Declarative Route Path Management in Angular Apps

With Great Angular Components Comes Great (Single) Responsibility

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