ngOnChanges for input changes in Angular - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the purpose of the ngOnChanges lifecycle hook in Angular?

It runs when Angular sets or resets data-bound input properties. It helps detect and respond to changes in input values.

beginner

How does Angular provide information about input changes inside ngOnChanges?

Angular passes a SimpleChanges object that contains previous and current values for each changed input property.

beginner

True or False: ngOnChanges is called only once during the component's lifecycle.

False. ngOnChanges is called every time an input property changes, including the first time the input is set.

intermediate

What must a component do to use ngOnChanges?

It must implement the OnChanges interface and define the ngOnChanges(changes: SimpleChanges) method.

beginner

What is a common use case for ngOnChanges?

To react to changes in input properties, such as updating internal state or triggering side effects when inputs change.

When is ngOnChanges called in an Angular component?

A Only when the component is destroyed

B Whenever an input property changes

C Only once when the component is created

D When a button is clicked

ngOnChanges runs every time Angular updates an input property.

What argument does ngOnChanges receive?

A The component's selector

B The component's template

C An object with previous and current input values

D No arguments

ngOnChanges receives a SimpleChanges object with details about input changes.

Which interface must a component implement to use ngOnChanges?

A OnChanges

B OnInit

C DoCheck

D AfterViewInit

Implementing OnChanges interface allows defining the ngOnChanges method.

Can ngOnChanges detect changes in properties that are not inputs?

A Only for output properties

B Yes, all properties trigger it

C Only if manually called

D No, only input properties trigger <code>ngOnChanges</code>

ngOnChanges only runs for changes in input properties decorated with @Input().

What can you do inside ngOnChanges?

A Update internal state based on new input values

B Change the component's selector

C Modify the component's template HTML

D Destroy the component

ngOnChanges is used to respond to input changes, often updating internal data.

Explain how ngOnChanges works and when it is triggered in an Angular component.

Think about how Angular tracks changes to inputs.

Describe a practical scenario where you would use ngOnChanges in your Angular component.

Consider when input data affects component behavior.