The life of an Angular component is eventful. Components get created, change state during their lifetime, and finally, they are destroyed. Angular provides some lifecycle hooks/functions that the framework invokes (on the component) when such an event occurs. Consider these examples:
- When a component is initialized, Angular invokes ngOnInit
- When a component's data-bound properties change, Angular invokes ngOnChanges
- When a component is destroyed, Angular invokes ngOnDestroy
As developers, we can tap into these key moments and perform some custom logic inside the respective component.
The hook we are going to utilize here is ngOnInit. The ngOnInit function gets fired the first time the component's data-bound properties ...