Return to site

ANGULAR TIP: Change Detection

· fullstack

Angular change detection is a feature that ensures the automatic synchronization between the data of a component and its HTML template view.

Change detection works by detecting common browser events like

  • 🖱️ mouse clicks, 
  • 🔌 HTTP requests, and 
  • ⚡ other types of events, and 

deciding if the view of each component needs to be updated or not.

It may occur that your Angular App does not behave as you expect.(For example, child components do not update)The use of change detection could help.

You can do that with

  • 👉 detectchange or 
  • 👉 markforcheck

The biggest difference between the two is that detectChanges() actually triggers change detection,while markForCheck() doesn't trigger change detectionYou can implement change detection this waywhere 'element' is the GUI which does not update well👇👇👇

Snippet: