What are some advanced examples of change detection in Angular?

What are some advanced examples of change detection in Angular?

In Angular, change detection can be optimized using techniques like OnPush strategy, trackBy in ngFor, and manual change detection with ChangeDetectorRef. Would you like to see examples of these?

Yes, please provide an example of using OnPush strategy.

Sure! The OnPush change detection strategy tells Angular to check the component only when its input properties change or an event occurs. Here's a simple example:

@Component({
  selector: 'app-example',
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <div>{{ data }}</div>
  `
})
export class ExampleComponent {
  @Input() data: string;
}

This way, Angular skips checking this component unless the input changes.

What about using trackBy in ngFor?

Using trackBy in ngFor helps Angular identify which items have changed, been added, or removed, improving performance. Here's an example:

<ul>
  <li *ngFor="let item of items; trackBy: trackById">{{ item.name }}</li>
</ul>

And in your component:

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

This way, Angular can track items by their unique IDs.

Can you explain manual change detection with ChangeDetectorRef?

Certainly! You can manually trigger change detection using ChangeDetectorRef. For example:

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

constructor(private cdr: ChangeDetectorRef) {}

someMethod() {
  // Update your data
  this.data = newData;
  this.cdr.detectChanges(); // Manually trigger change detection
}

This is useful when you need to update the view after an asynchronous operation.