DEV Community: BhanuprakashReddy

Angular 16 Signals a new way of managing application state.

BhanuprakashReddy — Mon, 15 May 2023 13:31:06 +0000

Before going into the topic let's brief …How Angular currently deals with reactive state management.

we all know that In Angular, the primary way to manage state changes is through services, components, and data binding using properties and events or RxJs. Angular provides features like two-way data binding, event binding, and property binding to facilitate the flow of data between components and their templates.
On the other hand, Solid.js is a separate JavaScript library that introduces the concept of "Signals" for managing reactive state in web applications. It is not directly related to Angular. But now in Angular 16 they introduced the concept of signal (Still under developer preview) included in @angular/core.

What is this Signal actually… ?

Signals are a new way of managing state changes in Angular applications, inspired by Solid.js. Signals are functions that return a value (get())and can be updated by calling them with a new value (set()). Signals can also depend on other signals, creating a reactive value graph that automatically updates when any dependencies change. Signals can be used with RxJS observables, which are still supported in Angular v16, to create powerful and declarative data flows.
Signals offer several advantages over the traditional change detection mechanism in Angular, which relies on Zone.js to monkey-patch browser APIs and trigger change detection globally. Signals allow you to run change detection only in affected components, without traversing the entire component tree or using Zone.js. This improves runtime performance and reduces complexity.

I know this theory is boring. Let's dive into the action.

Let's say you have an e-commerce application where users can add items to their shopping cart. You want to display the total price of the items and update it every time a new item is added or removed. Here's how you can use Signals to achieve this:

@Component({
  selector: 'my-cart',
  template: `
    <ul>
      <li *ngFor="let item of items">
        {{item.name}} - ${{item.price}}
        <button (click)="removeItem(item)">Remove</button>
      </li>
    </ul>
    Total Price: ${{totalPrice()}}
  `,
})
export class CartComponent {
  items = [    { name: 'Product A', price: 10 },    { name: 'Product B', price: 15 },    { name: 'Product C', price: 20 },  ];

  // Define a signal for the list of items
  itemList = signal(this.items);

  // Define a computed value for the total price
  totalPrice = computed(() => {
    return this.itemList().reduce((acc, curr) => acc + curr.price, 0);
  });

  removeItem(item) {
    // Update the itemList signal by removing the selected item
    this.itemList.set(this.itemList().filter((i) => i !== item));
  }
}

In this example, we define a signal itemList for the list of items in the cart and a computed value totalPrice that depends on itemList. Whenever an item is removed from the cart, we update the itemList signal which triggers the re-calculation of totalPrice.

using Computed() we can recalculate several other signal values if some signal changes.
If there is any change in signal that notifies all the dependant who listens to it.

`// To set a value of a signal you call the function signal like
variableName = signal(value);

//And to get the value out of the signal you call the variableName as a function like

To change the value of a signal there are 2 methods available. Update and mutate.

variableName = signal<any>({
 a: 'Test'
});

variableName.mutate(
 currentValue => currentValue.b = 'Another Test';
);

//or

variableName = signal<CustomerItem[]>([
  {
    customer: 'Bhanu'
  }
]);

variableName.mutate(
  customerArray => customerArray.push = {
    customer: 'Prakash'
  };
);

Effect
Effects are a concept that developers might already know from NGRX. Besides just getting the value by calling the signal by name like variableName(), they trigger an action that has no impact on the signals value but is executed when the value of the signal changes. The effect is also triggered when the function is executed for the first time. This means you can not only define it and it will be triggered once the signals value changes. Its executed the first time the code runs over the effect.

public weatherData$: Observable<WeatherData>;
public dateSignal = signal<Date>(Date.now());

public effectRef = effect(
 () => {
  this.weatherData$ = this.httpClient.get<WeatherData>('/weatherData?date=' + dateSignal());
 }
)

If the effect had an if else statement in it where one signal was in the if and another signal was in the else statement. It will register to both signals. But it is only executed when one of those 2 signals change. It's not executed when a third signal changes that is not mentioned in the effect.
The effect() function returns an Effect. It can be manually scheduled or destroyed. There are 3 methods on the Effect.

schedule(): Schedule the effect for manual execution.
destroy(): Shut down the effect, removing it from any upcoming scheduled executions.
consumer: Direct access to the effect's Consumer for advanced use cases.

computed
The computed function is like an effect. The difference is that it returns a new (and immutable) signal of type Signal instead of an Effect. This means that we can recalculate several other signal values if some signal changes.

import {  Component, computed, SettableSignal, signal, Signal } from '@angular/core';

@Component({
 selector: 'signal-test-component',
 template: '{{valueX()}}'
})
export class SignalTestComponent {
 public valueX: SettableSignal<number> = signal<number>(5);
 public valueY: SettableSignal<number> = signal<number>(5); 
 public valueZ: Signal<number>;

 constructor() {
  console.log('The number is: ' + valueX());
  this.valueZ = computed(
   () => this.valueX() + this.valueY()
  );
 }
}

valueZ will always depend on valueX and valueY and therefore has no methods to update or mutate. It does not need them. That's the difference between a SettableSignal and a Signal.

Nice visual explained by TeckShareSkk
Sample E-Comm App using Angular 16 Signals.

I hope you find this post helpful. Thanks for reading.

Improving Angular Rendering Performance with TrackBy and Change Detection Strategy

BhanuprakashReddy — Mon, 08 May 2023 17:39:31 +0000

Flickering in Angular applications can be caused by inefficient rendering, which can happen when the browser has to re-render the entire DOM for a component or list every time a change occurs. This can be especially problematic for large or complex applications.
To prevent flickering, developers can use the TrackBy function and OnPush change detection strategy to improve performance and reduce unnecessary rendering. These techniques can help provide a better user experience in Angular apps.

Lets dive into the Action

Let's say you have a component that displays a list of ITEMS, and each item has an ID, a name, and a description. The list is updated frequently, either by adding new items or by changing the properties of existing items. You want to make sure that when the list is updated, only the items that have changed are re-rendered, and not the entire list.
This is where the TrackBy function comes in. The TrackBy function is used to tell Angular how to track changes in the list items, so that it can identify which items have changed and only update those.

// item.component.ts
@Component({
  selector: 'app-item',
  templateUrl: './item.component.html',
})
export class ItemComponent {
  @Input() item: Item;
}

// item.component.html
<div>
  <h2>{{ item.name }}</h2>
  <p>{{ item.description }}</p>
</div>

// list.component.ts
@Component({
  selector: 'app-list',
  templateUrl: './list.component.html',
})

export class ListComponent {
  items: Item[];

  constructor(private service: ItemService) {
    this.items = this.service.getItems();
  }

  trackByFn(index: number, item: Item) {
    return item.id;
  }
}

// list.component.html
<ul>
  <li *ngFor="let item of items; trackBy: trackByFn">
    <app-item [item]="item"></app-item>
  </li>
</ul>

In above example, we have an Item component that displays the details of a single item, and a List component that displays a list of items using the *ngFor directive.
The trackByFn function is used to tell Angular how to track changes in the list items. In this case, we're using the item's ID as the key to track changes. This means that when a new item is added to the list or an existing item's properties are changed, Angular will only re-render the specific item, instead of re-rendering the entire list.
By using the TrackBy function in this way, we can significantly improve the rendering performance of our Angular application, especially for large or complex lists.

Change Detection Strategy

In this section, we'll explain how the change detection strategy can help improve application performance.

before getting into the point let's discuss what is this changeDetectionStrategy in Angular.

Change Detection is the process by which Angular keeps track of changes in a component's state and updates the view accordingly. By default, Angular uses the "Default".

Change Detection Strategies in Angular:

Default: This is the default Change Detection Strategy in Angular. It checks every component and its children for changes on each cycle of the event loop.
OnPush: This Change Detection Strategy checks for changes only when the component's @input properties change, or when an event is fired from the component or one of its children. we need to add a changeDetection property in component decorator to use this.

@Component({
  selector: 'app-example-list',
  templateUrl: './example-list.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class ExampleListComponent implements OnInit {
  @Input() items: ExampleItem[];

  trackByFn(index: number, item: ExampleItem): number {
    return item.id;
  }
}

Detached: This Change Detection Strategy disables Change Detection for the component and its children. This can be useful when a component is not expected to change, or when we want to manually trigger Change Detection later. With the Detached strategy, Angular will not check for changes in the component or its children until we manually trigger Change Detection using the ChangeDetectorRef.detectChanges() method.

However, we should be careful and make sure to manually trigger Change Detection when necessary to avoid issues with the view not updating correctly.

@Component({
  selector: 'app-large-list',
  templateUrl: './large-list.component.html',
  changeDetection: ChangeDetectionStrategy.Detached
})
export class LargeListComponent {
  @Input() items: LargeListItem[];
  private isListVisible = false;

  constructor(private cd: ChangeDetectorRef) {}

  showList(): void {
    this.isListVisible = true;
    this.cd.detectChanges();
  }
}

I hope you find this post helpful. Thanks for reading.

Dynamically Load a Component in Angular on Demand basis (Runtime)

BhanuprakashReddy — Mon, 01 May 2023 11:20:04 +0000

In Angular, we can load components dynamically on Demand basis or runtime. this will improve application performance. Instead of loading all components upfront, we can load only the required components when needed.
One common way to dynamically load components is by using the ComponentFactoryResolver service. This service allows us to create a factory for a component, which can then be used to instantiate the component dynamically at runtime.
To implement dynamic component loading, we can first create a host element in the template where the component will be rendered. Then, we can use the ComponentFactoryResolver service to create a factory for the desired component.
We can use the factory to create an instance of the component and attach it to the host element.
This approach helps to reduce the initial bundle size by loading only the required components at runtime. It can also improve the user experience by reducing the initial load time of the application.
In some cases you may want to create components dynamically at runtime, rather than including them in your template statically. For example, if you're creating a modal dialog that needs to be displayed on demand, you might want to create the dialog component programmatically instead of including it in the template directly.

let's get into action......

In Our Home Component first, create the host element in the template.

<div #container></div>
<button (click)="loadComponent()">Load Component</button>

Then, in the component class, inject the ComponentFactoryResolver service and create a reference to the host element:

import { Component, ComponentFactoryResolver, ViewChild, ViewContainerRef } from '@angular/core';
import { PopupComponent } from './popup.component';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent {
  @ViewChild('container', { read: ViewContainerRef }) container: ViewContainerRef;

  constructor(private resolver: ComponentFactoryResolver) { }

  loadComponent() {
    // Create a factory for the PopupComponent
    const factory = this.resolver.resolveComponentFactory(PopupComponent);

    // Create an instance of the PopupComponent
    const componentRef = this.container.createComponent(factory);
  }
}

then create PopupComponent

import { Component } from '@angular/core';

@Component({
  selector: 'app-popup',
  template: '<div>Popup Component</div>',
})
export class PopupComponent {}

When the "Load Component" button is clicked, the loadComponent() method is called. This method uses the ComponentFactoryResolver service to create a factory for the PopupComponent. It then uses the factory to create an instance of the component and attach it to the host element (container). This will render the PopupComponent in the DOM.

finally the Popup component is loaded after click event in Home component.

I hope you find this post helpful. Thanks for reading.