Angular lifecycle hooks methods

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:

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