ngDoCheck for custom change detection in Angular - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the purpose of ngDoCheck in Angular?

ngDoCheck is a lifecycle hook that lets you run custom change detection logic in a component. It runs during every change detection cycle, allowing you to check for changes Angular might miss.

beginner

When is ngDoCheck called in the Angular component lifecycle?

ngDoCheck is called after ngOnChanges and before ngAfterContentChecked during every change detection run.

intermediate

Why would you use ngDoCheck instead of relying on Angular's default change detection?

You use ngDoCheck when Angular's default change detection does not detect changes, such as when mutating objects or arrays directly instead of replacing them.

intermediate

What is a common pattern to detect changes inside ngDoCheck?

A common pattern is to store a previous value and compare it with the current value inside ngDoCheck. If they differ, you know a change happened.

beginner

What should you be careful about when using ngDoCheck?

Because ngDoCheck runs very often, avoid heavy or slow operations inside it to keep your app fast and responsive.

What does ngDoCheck allow you to do in Angular?

A Initialize component inputs

B Destroy component resources

C Run custom change detection logic

D Handle user events

ngDoCheck is specifically for custom change detection logic during Angular's change detection cycle.

When is ngDoCheck called?

A After every change detection cycle

B Only when inputs change

C Before <code>ngOnInit</code>

D Only once when the component is created

ngDoCheck runs after every change detection cycle, regardless of input changes.

Which scenario is a good reason to use ngDoCheck?

A When you want to detect changes in a mutated array

B When you want to listen to click events

C When you want to fetch data from a server

D When you want to style a component

Angular's default change detection may miss changes if you mutate arrays or objects directly. ngDoCheck helps detect those changes.

What is a recommended practice inside ngDoCheck?

A Run heavy calculations

B Make HTTP requests

C Modify DOM elements directly

D Compare previous and current values to detect changes

Comparing previous and current values is a lightweight way to detect changes inside ngDoCheck.

What should you avoid inside ngDoCheck to keep your app fast?

A Simple value comparisons

B Heavy or slow operations

C Logging to console

D Updating component inputs

Heavy or slow operations inside ngDoCheck can slow down your app because it runs very often.

Explain how ngDoCheck helps with custom change detection in Angular.

Think about when Angular's default detection might not notice changes.

Describe best practices to follow when implementing ngDoCheck.

Consider performance impact since it runs often.