Listening to Changes on Angular Component Input Properties | Task

Ole Ersoy
Jan - 17  -  1 min

Scenario

We have an @Input property animationState and we want to log changes to the property.

Approach

Implement OnChanges to receive notifications of changes to the animationState input property.

export class HelloComponent implements OnChanges { ...

Now we can log changes to the animationState property inside the ngOnChanges method.

ngOnChanges(changes: SimpleChanges) {
    console.log(changes.animationState);
}

Demo

Whenever the Toggle Animation button is clicked the HelloComponent will log the change to the animationState property.