Recently, I had to implement a popover view with many variations based on complex conditions. Using ngSwitch, in this case, was impossible, and using ngIf is unreadable and verbose. Here’s how I decided to approach this problem. The first step was to create a directive named TemplateIdDirective: @Directive({ selector…

Sometimes we want to forward and use an existing form control rather than creating a redundant value accessor wrapper. One common use case is when creating, for example, custom input components. The following image describes our goal:

Our application has various select components that are frequently used throughout the application, such as “select user,” “select wallet,” and “select blockchain” components. One approach to managing these components would be to individually query the options and pass them to the select component each time they are needed; however, this…

Lazy loading is a technique used to improve the performance of web applications by only loading the necessary code and resources when needed. This can be especially useful in large and complex applications, as it can help reduce the initial load time and improve the overall user experience. Recently I…

A new static method named runInInjectionContext has been added to TestBed in Angular v15.1.0-next.0 to make testing inject() easier. The runInInjectionContext function works similarly to the runInContext function. Let’s say we have a function that uses the http module to fetch users: export function getUsers() { return inject(HttpClient).get<User[]>('users'); } We…

Many applications requires the ability to create and update records through the user interface. Usually, we’ll want to utilize the same dialog component for both operations. …

In Angular v15, we can use the new directive composition API to apply directives directly to the host element of a component. Creating custom conditional structural directives at the moment involves a bit of boilerplate work. Let’s see how we can leverage it to create cleaner custom ngIf directives. Assume…

Guards and resolvers can now be plain functions in Angular v14.2.0. The inject() function can be used inside the function if we also want to use DI. For example: You can read this article to find out how it works. Now that we can use plain JS functions, we can take advantage of the power of functions in JS. In other words, we can compose or create higher-order functions. Most applications usually have a route guard for protected and unprotected routes. Let’s see how we can create one configurable guard that rules them all:

Sometimes we have to perform a certain operation repeatedly over time, with a set period of time between runs. The most common examples are when we need to poll a server to determine whether the operation succeeded or auto-refresh a stale screen with new data. The implementation of this functionality…