Angular lifecycle hooks

Tram Ho

Hello everyone, I have been working with Angular for a while. In the near future I will go to an interview to find a new stop, a new challenge, a new environment, to learn more => all is a lie, I want to change my job to achieve my goal “GET 1k5 trump ” So I will share some knowledge about Angular underarm to go to the interview. Today’s topic will be lifecycle hooks, interviews from Junior and above are all questioned.

In general, the life cycle of a component

Constructor

The default method of the class is executed when the class is initialized. It should be used to declare Dependency Injection, should not handle logic in this method

ngOnChanges

This hook will be called every time there is a change in the value of the Inputs of the component.

However, with Inputs of type Object or Array, when changing a property or pushing an element into that array, ngOnChange will not run, in this case it will only run when you change the reference of the Input variable.

Note if the component does not have Inputs then ngOnChanges will not run

ngOninit

This method will be called only once when Component is initialized. Here it is used for additional initialization for components such as variable initialization, call api, form initialization, …

Order of execution with Parent / Child Component case:

ngDoCheck

This method will be called after ngOninit and every time change detection runs. This method is used to custom Angular has a change detection mechanism, it will detect events such as DOM Event (click, hover), setTimeout, SetInterval, XHR Request. Upon capturing these events, Angular will detech Change the entire application’s component tree to check for changes and re-render the UI. Now the change detector for each component will work and ngDoCheck is also called. Here I have a component

And bind it to the app component

And when I click on the Change name button, the result will look like this

Since this method is called every time Angular detects a change in any one component, you should pay attention to avoid affecting application performance.

With this method we can implement our own desired component change detection mechanism by combining set changeDetection: ChangeDetectionStrategy.OnPush (the component only runs change detection only when the data Input value changes ) and the trigger change detection of component by hand

In particular, the guy ngOnChanges will not run when you change the value of 1 property of Object which is an Input of the component, you must change the reference of that object as above, in addition, ngDoCheck can also be the rescue. for you in this case, but remember to watch out Perf offline.

Order of execution with Parent / Child Component case:

ngAfterContentInit

The method is called only once after the first ngDoCheck. It executes after Angular projects content to component view with ng-content tag, so this method helps you to access content passed in with ContentChild decorator, for example, get a public property value from component content.

Example: WrapContent Component

Use WrapContent Component in App Component and pass the content to it as ChildContent Component

The output to the screen will be

ngAfterContentChecked

Called after Angular has checked the content passed into the component This method is first called after ngAfterContentInit executes and then called after every ngDoCheck (from the second time onwards) ie each time change detection is executed. For me, I often use this guy to execute the logic I want each time change detection to make sure the logic I run gets the latest data of the content passed.

ngAfterViewInit

Called after Angular has finished initializing the view component and child view. And it only runs once.The common use is to execute the view query by reference by ViewChild or ViewChilden.

The result will print:

ngAfterViewChecked

Called after Angular checks the component view and views the children or views that contain directives. The method is called after the first ngAfterViewInit, and after each ngAfterContentChecked

ngDestroy

Called once only when Angular destroys component.Used to handle events, ubsubscribe obseverble when canceling component

The order of execution when the components are nested

Nested Components fish, in other words, the components have a parent-child relationship, each of them will run their life cycle hook, whoever comes first, whoever lives in the world must have order, not my fens, everyone For running first, it is okay

  • Ok, with ngOnit, ngDoCheck, I do it first, then you can do it.
  • ngDestroy then the son runs first, after all the children, the father will commit suicide (destroy)
  • With ngAfterViewInit and ngAfterViewChecked, the children will be run first, after those groups have finished running, the parent component will run those two hooks.

Note

In the case of your parent component, you DO NOT set changeDetection: ChangeDetectionStrategy.OnPush, ie it’s Default, ie each time the state of the application changes, that component will perform change detection. Then after the parent Component runs ngDoCheck, the child component will run ngDoCheck -> ngAfterContentChecked -> ngAfterViewChecked. But if your parent component set ChangeDetectionStrategy.OnPush, then unless the Input of the parent component changes, or an event occurs to run change detection at the parent component, the child component will execute the hook above, otherwise it won’t run anywhere. guys. The reason for this is that when you set ChangeDetectionStrategy.OnPush, the parent component will not run change detection every time the state application changes without related to it => The next article I will write about Change Detection for you to understand better.

The above is my knowledge about Angular lifecycle hook that I want to share with you. Hope you will contribute to building what you lack. Let’s GET X k trump together

Share the news now

Source : Viblo