This note is for understanding changeDetection strategy in Angular with examples.

👉 Angular - ChangeDetectionStrategy

👉 Angular - ChangeDetectorRef

• How to use?

  @Component({
    // ... others
    changeDetection: ChangeDetectionStrategy.OnPush 
    // default to .Default (CheckAlways)
    // .OnPush (CheckOnce)
  })
  export class NameOfComponent implements OnInit {}
  

• Good to read: angular - What's the difference between markForCheck() and detectChanges() - Stack Overflow

• .Default ensures the accuracy (view updated when having changes), it can lead to performance → use .OnPush to optimize!

• When the view is detached from the change-detection tree, we use detach() in combination with detectChanges().

• When for some reason, the view isn’t reflected with the changes, use detectChanges()!

• Use markForCheck() whenever use ChangeDetectionStrategy.OnPush!

• If you want to detach change detector to limit how often check occurs (and reattach later), read the official guide.