Angular lifecycle hooks methods

Posted By :Neeraj kumar Goswami |30th March 2023

Lifecycle hooks are a unique feature in Angular that allows us to 'hook into' and run law at a specific lifecycle event of a element or directive.

Angular manages factors and directives for us when it creates them, updates them, or destroys them. With lifecycle hooks, we can gain better control of our operation.

To do this, we add some specific hook styles prefixed with ng to our element or directive. These hooks are resolve into two types hooks for factors or directives and hooks for child factors.

This composition will cover the following

  • The different lifecycle hooks for Angular factors and directives
  • How to hook into element lifecycles to run our law
  • What triggers lifecycle hooks and the order in which they're called

These are the hooks for factors or directives, in call order

  1. constructor()
  2. OnChanges
  3. OnInit
  4. DoCheck
  5. OnDestroy 

 

And these are the hooks for a element’s children factors

 

  1. AfterContentInit
  2. AfterContentChecked
  3. AfterViewInit
  4. AfterViewChecked

 

The following table summarises the Angular lifecycle hooks:

OnChangesCalled when the input properties have changed
OnInitCalled on initialization
DoCheckDeveloper’s custom change detection
OnDestroyCalled before the component is destroyed
AfterContentInitCalled when the component’s content ngContent is initialized
AfterContentCheckedCalled whenever the component's content is updated or checked for updates.
AfterViewInitCalled when the component’s projected view has been initialized
AfterViewCheckedCalled after the projected view has been checked

 

Hooks for factors or directives

In Angular, factors are the lowest units of structure blocks for a element tree. This enables us to develop and maintain our codebase veritably fluently. factors are classes with the@Component() decorator on the them, like so

Directives are technically factors, but they operate on thenon-UI part of the DOM. Their work is to add redundant functionality to the DOM. Directives are also classes, but decorated with the@Directive() class decorator.

The following are lifecycle hooks for factors or directives, with explanations of how they work and how to use them.

Constructor()
This is the constructor we're familiar with in JS classes. It's included because our factors directives are JavaScript classes with either an@Component or@Directive decorator. So this constructor is called when our element/ directive case is created by Angular using the new keyword.

OnChanges
OnChanges is a lifecycle hook that's called when any data- bound property of a directive changes. An ngOnChanges() system must be defined to handle the changes.

App bound its books property to BComponent’s books. Note how we enforced the OnChanges interface and added the ngOnChanges system. ngOnChanges will be called by Angular when the books property it receives from the App element has changed.

still, Angular won't pick it up, and the ngOnChanges in the BComponent won't be run
If we change the books property in the Appcomponent.The drive system is a shifting system, and with the below law, BComponent won't pick up any changes and ngOnChanges won't be run.

As the BComponent isn't an OnPush CD strategy, its view will be streamlined but the new book added to books won't be displayed, because Angular updates a element/ directive input tapes before the streamlining it DOM.

We should be apprehensive of invariability and always try to return a new state/ reference. We'll use anon-mutating system called Array#concat


About Author

Neeraj kumar Goswami

Neeraj Kumar Goswami is a skilled and experienced backend developer with 1.5 years of industry expertise. He possesses a deep understanding of the latest technologies, including React JS, Angular JS, AWS Lambda, Node JS, HTML, CSS, JavaScript, SQL, and NoSQL databases. Neeraj has worked on various client projects namely Konfer, using the MEAN stack, Viztown Project , which was built on the MERN stack and BioGas Project, utilizing technologies such as Node JS, PostgreSQL, and AWS Lambda. He remains committed to constantly seeking new challenges and expanding his knowledge in latest technologies.

Request For Proposal

[contact-form-7 404 "Not Found"]

Ready to innovate ? Let's get in touch

Chat With Us