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.