Introduction
Components are like a building block that controls the HTML view of your application. They can communicate with other components to provide functionality to the application. The components are denoted by @Components. An application can have more than one component. There is the sequence of the events in the lifecycle of the component. These events are basically called the Lifecycle “Hook events”. The events are explained below according to their lifecycle.
ngOnChanges():
It executes whenever we change the value of input control in the component. Actually, this event is fired first when the value of a bound property is changed.
ngOnInitT():
This event is called after ngOnChanges(). The main purpose of this event is to initialize the data in the component.
ngDoCheck:
This event is triggered every time to check the input properties of a component. It allows us to implement our own change detection logic or algorithm for any component.
ngAfterContentInit:
This method is executed when Angular performs any content projection within the component views. This event executes just after the ngDoCheck() method, and it is linked with child components.
ngAfterContentChecked:
This method is also Known as every subsequent execution of ngDoCheck(). This method is mainly linked with child component initialization. It executes every time the content of the component is checked by the change detection. It is called after ngAfterContentChecked().
ngAfterViewInit:
This method is initialized when Angular initializes the component’s view and child views. It is called after ngAfterContentChecked(). It executes when the component’s view is fully initialized.
ngAfterViewChecked:
ngAfterViewChecked also executes when any binding of the children’s directives has been changed. This method is executed every time the view of the given component is checked by the change detection.
ngOnDestroy:
ngOnDestroy is invoked before angular destroy the component. It is beneficial for unsubscribing from the observables and detaching the event handlers to avoid memory leaks. It is called just before the component is removed from the DOM.
What are components in an application?
Components are like a building block that controls the HTML view of your application. They can communicate with other components to provide functionality to the application. The components are denoted by @Components. An application can have more than one component.
Which event executes when we change the value of input control?
ngOnChanges() executes whenever we change the value of input control in the component. Actually, this event is fired first when the value of a bound property is changed.
When is ngDoCheck triggered?
ngDoCheck event is triggered every time to check the input properties of a component. It allows us to implement our own change detection logic or algorithm for any component.
Which event executes after ngAfterContentChecked?
ngAfterViewInit is called after ngAfterContentChecked(). This method is initialized when Angular initializes the component’s view and child views. It executes when the component’s view is fully initialized.