LifeCycle Hooks | AfterContentInit, AfterContentChecked, AfterViewInit, AfterViewChecked | Part -4
Share, Support, Subscribe!!
Subscribe: https://bit.ly/3kk36Nh
Youtube: / worldtechtube
This is the part - 4 of lifecycle hooks in angular components. In this video we will see the use of hooks :
ngAfterContentInit, ngAfterContentChecked, ngAfterViewInit, ngAfterViewChecked.
We will be seeing the difference in these hooks and the sequence of getting these hooks called in angular when navigation to the certain component view.
They run in the sequence:
ngAfterContentInit - child component.
ngAfterContentChecked - child component.
ngAfterViewInit - child component.
ngAfterViewChecked - child component.
contentInit, contentChecked?
So the logic written to the class is the content of the component.
Every component has the view as well so anything change here in html will be in viewInit and viewChecked.
So Component logic is in Content and view variables changes is in viewInit and viewChecked
First time when we navigate to the URL then the contentInit and viewInit will trigger. Next time when we again visit to the same route then only ngAfterContentCheked and ngAfterViewChecked is triggered.
Because the view is not initialised again rather it just checking if the content is updated or if the view is checked for any change detection.
So these are the hooks that we can use to perform any custom logic.
ngAfterContentInit is invoked after angular perform any content projection into the component's view.
ngAfterContentChecked is invoked after each time the content of the given component has been checked by teh change detection mechanism of angular
ngAfterViewInit is invoked after the view has been fully initialized. i.e template of the component is initialised.
ngAfterViewChecked is invoked each time view of the component has been checked by change detection mechanism.
For better understanding we have to know change detection mecahnism.
#Angular #programming #dotnet #csharp #interview #QuestionsAndAnswers #coding #tutorial #learning #javascript #js #html #css #angularjs