Published in Netanel Basal·Mar 4Getting to Know the DestroyRef Provider in AngularAngular v16 has introduced a new provider called DestroyRef, which allows for registering destroy callbacks for a specific lifecycle scope. This feature is applicable to components, directives, pipes, embedded views, and instances of EnvironmentInjector. The usage of DestroyRef is straightforward. We can inject the DestroyRef provider and register a destroy…Angular1 min readAngular1 min read
Published in Netanel Basal·Mar 1Simplifying View Logic in AngularRecently, 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…Angular2 min readAngular2 min read
Published in Netanel Basal·Jan 25Forwarding Form Controls to Custom Control Components in AngularSometimes 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:Angular3 min readAngular3 min read
Published in Netanel Basal·Jan 16Why Directives are the Go-To Choice for Select Component Options Reuse in AngularOur 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…Angular2 min readAngular2 min read
Published in Netanel Basal·Dec 19, 2022Optimizing Angular Form Validation with Lazy LoadLazy 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…Angular2 min readAngular2 min read
Published in Netanel Basal·Dec 11, 2022Testing DI Functions in AngularA 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…Angular2 min readAngular2 min read
Published in Netanel Basal·Dec 6, 2022Implementing Upsert Form Dialogs in AngularMany 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. …Angular3 min readAngular3 min read
Published in Netanel Basal·Nov 22, 2022Making DRY Conditional Structural Directives Using Angular Directive Composition APIIn 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…Angular2 min readAngular2 min read
Published in Netanel Basal·Nov 3, 2022Create Configurable Route Guards in AngularGuards 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…Angular1 min readAngular1 min read
Published in Netanel Basal·Nov 1, 2022Repeat and Retry HTTP Requests Using RxJSSometimes 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…Rxjs2 min readRxjs2 min read
