When developing an Angular application, it is important to understand how components work, including their lifecycle. This lifecycle is managed by Angular, so it’s Angular that will create the component, render it and finally destroy it when necessary.
- ngOnChanges: it is called when an input is defined or modified from the outside. The status of changes to the inputs is provided as a parameter
- ngOnInit: it is called only once and allows the initialization of the component, whether heavy or asynchronous (we do not touch the constructor for that)
- ngDoCheck: it is called after each detection of changes
- ngAfterContentInit: it is called after the external content is projected into the component (transclusion)
- ngAfterContentChecked: it is called each time an external content check (transclusion) is made
- ngAfterViewInit: it is called when the component view as well as that of its children are initialized
- ngAfterViewChecked: it is called after each check of component views and child component views.
- ngOnDestroy: it is called just before the component is destroyed by Angular.
Note, the ngAfterContentInit, ngAfterContentChecked, ngAfterViewInit and ngAfterViewChecked methods are exclusive to components, while all others are also exclusive to directives.