A complete guide on Life Cycle of Angular Component

Hooks for the component

• Constructor

• ngOnChanges

• ngOnInit

• ngDoCheck

• ngAfterContentInit

• ngAfterContentChecked

• ngAfterViewInit

• ngAfterViewChecked

• ngOnDestroy

• ngOnChanges

 Invoked every time there is a change in one of the input properties of the angular component.

<app-users [name]="data"></app-users>

When the value of data was changed, Angular change detection updates the name and calls ngOnChanges(). After ngOnChanges() was called the first time, ngOnInit() will be called once, to indicate that initial bindings ([name]=”data”) were resolved and applied.

• ngOnInit

This is called when this event initializes after angular first displays the data-bound properties or when the component has been initialized.

This hook is called only once after the first ngOnChanges.

• ngDoCheck

This event is invoked every time when input properties of the component are checked. We use this method to implement the check with our own logic changes. It allows us to implement our own changes detection algorithm for the given component.

Important: ngOnInit() and ngDoCheck() can be implemented together in the same component. 

• ngAfterContentInit

ngAfterContentInit method is invoked when angular performs any content projection within the component. This method is called for the first time when all the bindings of the component need to be checked for the first time. This event is called just after ngDoCheck. This method is linked with the child component initialization.

• ngAfterContentChecked

Invoked each time when the content of the given component has been checked by the change detection algorithm of Angular. 

• ngAfterViewInit

Invoked when the component’s view has been fully initialized. This method is initialized when Angular initializes the component’s view and child’s view. This method is called only once after ngAfterContentChecked.

• ngAfterViewChecked

Invoked each time the view of the given component has been checked by the change detection algorithm of Angular. ngAfterViewChecked method executes every subsequence of the execution of the ngAfterContentChecked(). This method also executes when any binding of the children directives has been changed. So, this method is very useful when the component waits for some value which is coming from its child components.

• ngOnDestroy

ngOnDestroy method will be executed just before Angular destroys the components. This method is very useful for unsubscribing the observables and detaching the event handlers to avoid memory leaks. Actually, this event is called just before the instance of the component is finally destroyed. This event is called only once, just before the component is removed from the DOM.