Lifecycle hooks

Posted By : Ekta Bhadauriya | 10-May-2021

Angular calls lifecycle hook methods on directives or components to create, change, and destroy the components or directive.

The lifecycle of a component starts when Angular initiates the component class and renders the component view along with its child views. The lifecycle continues with change detection, since Angular checks when data-bound properties changed, and updates the view and the component as needed. The lifecycle of a component ends when Angular destroys the component instance and removes its rendered template from the DOM. Directive has a similar lifecycle, as Angular create, update, and destroy instances in the course of execution.

Angular use these lifecycle methods for key events in the component/directive in order to initialize the new instance, initiate change detection whenever needed, respond to update during change detection and clean up before deletion of instance.

Lifecycle sequence

After creating a component or directive, Angular calls these methods in the following sequence at a specific moment:

 

Hook

Purpose and Timing

ngOnChanges()

it respond when Angular (re)sets data-bound input properties. This method receives object of current and previous property values which called before ngOnInit() and whenever one or more data-bound input properties changed.

ngOnInit()

this method initialize the directives/components after Angular first displayed the data-bound properties and set the directives and component's input properties.

Called once, after the first ngOnChanges().

ngDoCheck()

Detect and act upon the change that Angular can't or won't detect on its own.

this method called during every change detection runs, immediately after ngOnChanges() and ngOnInit().

ngAfterContentInit()

Respond after Angular project external content into the component's view.

Called once after the first ngDoCheck().

A component-only hook.

ngAfterContentChecked()

Respond after Angular check the content projected into the component.

Called after the ngAfterContentInit() and every subsequent ngDoCheck().

A component-only hook.

ngAfterViewInit()

Respond after Angular initialize the component's views and child views.

Called once after the first ngAfterContentChecked().

A component-only hook.

ngAfterViewChecked()

Respond after Angular check the component's views , child views and the view that contains the directive.

Called after the ngAfterViewInit and every subsequent ngAfterContentChecked().

A component-only hook.

ngOnDestroy

Cleanup just before Angular destroys the directive/component. Unsubscribe Observable and detach event handlers in order to avoid memory leaks.

Called just before Angular destroys the directive/component.

 

 

About Author

Author Image
Ekta Bhadauriya

Ekta stands out as a highly accomplished Frontend Developer, specializing in Angular technology. In addition to her mastery of Angular, she possesses a comprehensive understanding of various programming languages and tools, including HTML, CSS, JavaScript, AMP, and Git. Ekta has made significant and noteworthy contributions to several internal projects, such as the Oodles Dashboard, Careers Frontend, and Oodles.com. Her expertise and skills have played a pivotal role in the success of these projects.

Request for Proposal

Name is required

Comment is required

Sending message..