In this tutorial, we’ll cover component lifecycle using the following topics:
1. Component Lifecycle Overview
As you know, an Angular application is made up of components. Component lifecycle begins when a component class is instantiated and rendered together with its child views. The lifecycle includes detection of changes that occur in the component. For instance, changes in data-bound properties and update made to the view.
The component’s lifecycle terminates when the Angular destroys the component instance and removes its template from the DOM.
Your application can respond to events in the component lifecycle by using lifecycle hook methods. For instance, you may want to perform certain operations when the component is instantiated. Or perhaps you need to do some cleanup when the component is being destroyed. Let’s now look at how you can achieve this by responding to lifecycle events.
2. Responding the Lifecycle Events
To respond to lifecycle events, you need to implement one or more of the lifecycle hook interfaces. A typical example is the OnInit interface. If you look at a newly created component, you’ll see that this interface is automatically implemented.
export class PersonComponent implements OnInit { ngOnInit(): void { } }
Each interface the prototype of a particular hook method. The methods name is the name of the interface prefixed with ng. Therefore the OnInit interface has a hook method called ngOnInit(). If implemented, Angular would call it shortly after checking the input property of the component for the first time.
The table below provides a list of Angular lifecycle hook methods in the sequence in which they are called. Take some time to go through them. We’ll demonstrate how they work in a practical following this tutorial.
Hook method | Description |
ngOnChanges() | Called before the ngOnInit() and anytime there is change in data-bound input properties |
ngOnInit() | Called only once after the first ngOnChanges(). Normally used to initialize the component. Fetching data for instance |
ngDoCheck() | Called right after ngOnChanges(). Used to detect and act respond to changes that Angular can’t or won’t detect on its own. |
ngAfterContentInit() | Called only once, after the first ngDoCheck(). Triggers after Angular projects external content into the view, or into the view that a directive is in. |
ngAfterContentChecked() | This is called after ngAfterContentInit() and every subsequent ngDoCheck(). |
ngAfterViewInit() | Called only once after the first ngAfterContentChecked(). Responds after Angular initializes the component’s views and child views, or the view that contains the directive. |
ngAfterViewChecked() | Called after the ngAfterViewInit() and every subsequent ngAfterContentChecked(). Responds after Angular checks the component’s views and child views, or the view that contains the directive. |
ngOnDestroy() | Called immediately before Angular destroys the directive or component. Dos cleanup just before Angular destroys the directive or component. Unsubscribe Observables and detach event handlers to avoid memory leaks. |
3. Component Lifecycle Demo
The code below illustrates how component lifecycle hooks work. Just create a new component called Second. Then update using the code below:
export class SecondComponent implements OnChanges, OnInit, DoCheck, AfterContentInit { constructor(){ alert('1. OnChanges() is called'); } title = 'Lifecycle Hooks Demo'; ngAfterContentInit(): void { alert('4. AfterContentInit() is called'); } ngDoCheck(): void { alert('3. ngOnDoCheck() is called'); } ngOnInit(): void { alert('2. ngOnInit() is called'); } ngOnChanges(changes: import('@angular/core').SimpleChanges): void { } }
When you launch the application and view the component, you’ll see that each method is called in the sequence explained.
I recommend you try out all other methods in the table.
[…] Angular 10 – Component Lifecycle […]