Life Cycle of Angular Components : Methods, Different Types, and Interface

Introduction

The client-side platform which allows the building of applications for both the web and the mobile is angular. It was introduced in 2009 by Google. Initially, the platform supported Javascript and HTML, which got replaced with Angular TypeScript and other scripting languages.

Many versions of Angular have been developed with AngularJS to Angular-7 and so on. Whatever version be it, the angular is generally built up of components. Therefore, understanding the components is important for getting a clear understanding of the processing of the components. 

However, every component of the angular has a specific lifestyle where each stage of the angular lifecycle goes through the steps of initialization to the steps of destruction. 

Check out our free courses to get an edge over the competition.

The article will focus on the events of the lifecycle of the different components of angular.

Life Cycle Methods

The components within angular have a different life cycle and a definite number of stages through which the process of initialization to destruction is carried out. The different stages of the components are referred to as the ‘life cycle hook event’. 

For controlling the components within angular, the developers can use the hook events at different phases of the application. Eight types of lifecycle hook events are present which the developers can use in any of the components of the angular. The function call corresponding to the specific lifecycle event has to be added by the developer. 

Check out upGrad’s Advanced Certification in Cyber Security 

A constructor method must be present for every component as the components belong to a typescript class. It is always the component class constructor that is executed first before the execution of any of the angular lifecycle hooks. For adding any dependencies, the constructor can be used for the required task.  The angular lifecycle hooks are executed in a specific order.

Whenever there is an initialization of any component in angular, root components are created and presented. The heir of the components is then produced.

The division of the lifecycle stages occurs in two phases: a phase that links to the component and another that links to the component’s children.

Also Read: Exciting Angular Project Ideas  

The Different Types of Lifecycle hook 

1. ngOnChanges –

This event is called every time whenever there is a change in the value of control of the input. The change in the value of a property that is bound fires this event. A data map containing the changes, i.e. the previous and the current value of the property within a SimpleChange.

Check out upGrad’s Advanced Certification in Blockchain 

• Properties
  • The components having an input can use the method.
  • Whenever there is a change in the value of the input, the method gets invoked.

2. ngOnInit

After the initialization of the component or the display of the properties of the bound data, the event of ngOnInit is initialized. The event is called once only after the event of ngOnChanges.  Therefore, the event is mainly responsible for initializing the components data.

• Properties
  • The data in a component is initialized by this event.
  • The method is called when the values of the input are set.
  • Angular CLI has by default added this hook to all its components.
  • The method can be called only once.

3. ngDoCheck 

After the check on the input properties of the angular components, the triggering of the ngDoCheck event occurs. It is mainly done to detect or act upon any changes that angular fails to detect. Based on the developer’s logic, the check can be implemented. Therefore, implementation of any custom change logic or algorithms for detection of change in any components is allowed by the event.

• Properties
  • For any detection of changes angular runs this method.
  • The method is called for detecting changes.

4. ngAfterContentInit –

After the projection of the external content within the view of the component, the event ngAfterContentInit is called. For checking all the component bindings for the first time, this method gets executed for the first time. Its execution follows as soon as the execution of the method ngDoCheck(). The child component is usually linked with this method.

• Properties 
  • Initially, the method is called after ngDoCheck
  • Work is done by the content initialization.

5. ngAfterContentChecked –

The projection of the external content into the component is followed by checking the projected content. The method is called every time the check in the content is made through the mechanism of change detection of angular. It is executed after the execution of the method ngAfterContentInit(). Also, the method is executed after the subsequent execution of ngDoCheck(). It is usually linked with the initialization of the child components.

• Properties 

  • To get started, the method waits for the completion of ngContentInit. 
  • Execution is done after ngDocheck.

6. ngAfterViewInit

With the initialization of the angular components and the child components, the method of ngAfterViewInit is called. After the execution of the ngAfterContentChecked method, ngAfterViewInit method is called for the first time. The method is applicable only to the components of angular.

• Properties

  • Only once the call for the method is generated after the view of the component is initialized.

7. ngAfterViewChecked –

Just after the ngAfterViewInit method, the ngAfterViewChecked method is called. Whenever the change detection method of angular does its checks over the components, the method of ngAfterViewChecked gets executed. The method is also executed after the execution of the ngAfterContentChecked(). Also, when the binding of the directives of the child component is changed, the method gets executed. 

• Properties

  • The call is generated after the initialization and checking.
  • Work of the method is started after the completion of every method of ngDocheck.

8. ngOnDestroy

The method is called just before the destruction of the components by angular. To avoid scenarios of memory leaks, the method is able to detach event handlers, and also useful in unsubscribing observables. Only for once, the method is called to remove the component from the DOM.

• Properties

  • The call is generated just before the removal of components from DOM.

upGrad’s Exclusive Software Development Webinar for you –

SAAS Business – What is So Different?

Interfaces in Angular Lifecycle

The class of the components can be used for defining the angular lifecycle hooks methods. However, with the help of the interfaces, the methods can be called upon. The names of the interfaces are similar to that of the method names, omitting the prefix “ng”. This is because of the presence of a typescript interface with each of the methods of the lifecycle hooks. For example, the interface of ngOnInit is called OnInit. Only one event of the lifecycle hook is defined through a single interface. Further, the compiler doesn’t throw any compilation error when the interfaces are not implemented.

Example: 

An example has been shown to implement a lifecycle hook. The code shown below is to be placed in the file ‘app.component.ts’.

Source

It shows how to call the lifecycle hook ngOnInit.

An example of adding a module to the repository ‘ng-example’ is shown below. The module name is lifecycle-hooks which has components (both parent and child) for an example of ‘ngOnChanges’ called the changes-example. For routing to the component lifecycle-hooks, routing is added to the sidebar and the component ‘changes-example’ is placed inside that component. This shows the parent component along with the child component. 

All the methods of the lifecycle hooks are then going to be added to both components along with the name of the event hook called console.log().  The child is added to the statements of the child console for differentiating the parent and the child components.

The look of the parent component is shown below.

Source

The child component is identical but it is a part of the statements of the console.log. 

Running of the ng serve will show the order of the firing of the events. It describes the order of the methods executed. Initialization of the component, its contents, checking of the contents, initialization, and checking of the child component. It is followed by the final declaration that the view of the component is initialized and checked. 

Also Read: How to run the Angular Project

In the next step the parent component is added with a simple event where some value of an input to the child is manipulated. For this, a button is added to the parent component which when clicked will increase the number by a value of one. The increment will be passed to the child as input and will be displayed.

Source

The look of the parent html is

Input ‘num’ is displayed as:

<h4>{{num}}</h4>

On clicking the button ‘+’, there will be the firing of an event where the events of the lifecycle hooks will be executed over the components. The event ‘ngOnChanges’ is fired in the child as the input value to the child is detected by the ‘ngOnChanges’. 

Learn Software Courses online from the World’s top Universities. Earn Executive PG Programs, Advanced Certificate Programs, or Masters Programs to fast-track your career.

Conclusion

The article provided an overview of the stages of the angular components. The specific order by which the angular lifecycle hooks proceeds is discussed and also the application of such events is shown.  

To widen out the application of such software components, you can check out the course of upGrad, “Executive PG Programme in Software Development – Specialisation in Full Stack Development”. Any mid-level professionals within 21 to 45 years of age can join the course certified from IIIT-Bangalore. The online course offers the benefits of live lectures, hands-on experiences, the status of IIIT-B alumni, and a 4 months certification in Data Science & Machine Learning free of cost. If you are still aiming to get that dream job of yours, go through the course which ensures placements in top industries. Any queries are welcomed by our team.