Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

What is the difference between ngAfterViewInit() and ngAfterViewChecked()?

Tags:

angular

I am learning Angular 2. In the angular 2 lifecycle hooks

ngAfterContentInit -- Component content has been initialized ngAfterContentChecked -- Component content has been Checked ngAfterViewInit -- Component views are initialized ngAfterViewChecked -- Component views have been checked 

I can't understand the difference between the ngAfterContentInit Vs ngAfterContentChecked, ngAfterViewInit Vs ngAfterViewChecked.

They mentioned Component content has been Checked and Component views have been checked. I can't understand what that word "Checked" mentioned?

Can any one explain.

like image 408
Gmv Avatar asked Sep 11 '17 18:09

Gmv


People also ask

What is the difference between ngAfterViewInit and ngAfterViewChecked?

ngAfterViewChecked()That means Checked states to say it runs after Init . Initialization means it runs at first and Checking for the changes runs many times after initialization.

What is difference between ngAfterContentInit and ngAfterViewInit?

ngAfterContentInit : This is called after components external content has been initialized. ngAfterViewInit : This is called after the component view and its child views has been initialized.

What is ngAfterViewChecked in Angular?

ngAfterViewChecked()linkA callback method that is invoked immediately after the default change detector has completed one change-check cycle for a component's view.

What is the difference between ngOnInit and ngAfterViewInit?

ngOnInit() is called right after the directive's data-bound properties have been checked for the first time, and before any of its children have been checked. It is invoked only once when the directive is instantiated. ngAfterViewInit() is called after a component's view, and its children's views, are created.


2 Answers

The best article out there that explains lifecycle hooks in details is Everything you need to know about change detection in Angular.

ngAfterViewInit Vs ngAfterVIewChecked

As explained in the article the ngAfterVIewChecked is called every time Angular has finished running change detection on a component and it's children. ngAfterViewInit is called only during first change detection cycle. You can use it if you need to know when the first change detection cycle runs. For example, you need to setup listeners for some jQuery elements and you need to wait until they are initialized:

ngAfterViewInit() {   this.widget = $(this.location.nativeElement).slider({value: this.value});    this.widget.on('slidestop', (event, ui) => {     this.onChange(ui.value);   }); } 

The same holds for ngAfterContentInit with the difference that Angular runs change detection for projected content (through ng-content) instead of the children specified in the components template.

I can't understand what that word "Checked" mentioned?

Checking means running change detection and performing change detection related operations like DOM update, querylist update and child component bindings update.

like image 165
Max Koretskyi Avatar answered Sep 22 '22 14:09

Max Koretskyi


You can refer to the docs which clearly states of these:

ngAfterContentInit()

Respond after Angular projects external content into the component's view. Called once after the first ngDoCheck().

ngAfterContentChecked()

Respond after Angular checks the content projected into the component. Called after the ngAfterContentInit() and every subsequent ngDoCheck().

ngAfterViewInit()

Respond after Angular initializes the component's views and child views. Called once after the first ngAfterContentChecked().

ngAfterViewChecked()

Respond after Angular checks the component's views and child views. Called after the ngAfterViewInit and every subsequent ngAfterContentChecked().

That means Checked states to say it runs after Init. Initialization means it runs at first and Checking for the changes runs many times after initialization.

like image 35
Bhojendra Rauniyar Avatar answered Sep 20 '22 14:09

Bhojendra Rauniyar