What is the purpose of the Second Parameter in creating an Angular Signal?

The angular signal() function creates a signal. This function takes two input parameters.   Initial value Optional Equality function. By default, Angular executes the code of effect() even if the signal is set or updated with the same value. How can we avoid that? By leveraging the second parameter of the signal() function. Let usContinueContinue reading “What is the purpose of the Second Parameter in creating an Angular Signal?”

Interface Segregation Principle in TypeScript

The interface Segregation Principle is one of the fundamental principles of the SOLID principle. It says to keep the interface as small as possible. In the words of Uncle Bob, keep interfaces small so that classes don’t end up depending on things they don’t need. A client ( class) should not be forced to implementContinueContinue reading “Interface Segregation Principle in TypeScript”

How to check the status of an Angular Reactive Form’s Control

Sometimes, you may have a requirement to do something when the status of an Angular form control changes.  For example, you have a Login Form, and when the status of the Email control changes from valid to invalid and vice versa, you need to perform some actions. In this post, let us see how weContinueContinue reading “How to check the status of an Angular Reactive Form’s Control”

How to Lazy and Dynamically Load a Component in Angular

There are three ways you can use a component in an Angular app. Loading on route change Using as a child component Dynamically loading on demand However, this article focuses on loading a component dynamically and lazily. The main advantage of lazily loading a component is reducing the initial bundle size and only downloading theContinueContinue reading “How to Lazy and Dynamically Load a Component in Angular”

Required @Input properties in Angular

Angular 16 adds a new future of making an @Input() decorated property REQUIRED, which means that to use that component, the value of the required property has to be passed. @Input({required:true}) title? :string; To Understand it, let us assume that you have a component named ProductComponent with @Input() decorated properties as shown below, const templateContinueContinue reading “Required @Input properties in Angular”

Step-by-Step Understanding the Async Pipe

The async pipe can make a huge difference in your change detection strategy for your Angular app. If it’s been confusing to you so far, come work through this step-by-step explanation. We’ll understand it together! In Angular, the async pipe is a pipe that essentially does these three tasks: It subscribes to an observable or aContinueContinue reading “Step-by-Step Understanding the Async Pipe”