Angular Life Cycle Hook #Part3 | content vs view (Tutorial 43)

This is part-3 on Angular Life Cycle Hook and will talk about ngAfterContentInit, ngAfterContentChecked, ngAfterViewInit and ngAfterViewchecked Life Cycle hook in details.

Support my channel by like, share and subscribe so that I can reach to wider audience and can help them :) :)

*Checkout other videos on Life Cycle Hook:*
Life Cycle hook Part-1:

Life Cycle hook Part-2:

ng-Content

ContentChild and ContentChildren

ViewChild and ViewChildren

Content Vs View
View

Before we go into these hooks, it's important to understand the difference between Content and View.

AfterContentInit and AfterContentChecked are hooks that deal with content, while AfterViewInit and AfterViewChecked are hooks that deal with views.


Content
Content refers to the external content injected into this component using the Content Projection.
Content projection is a way to pass the HTML content from the parent component to the child component. The child component will display the template in a designated spot. We use the ng-content element to create a spot in the template of the child component

View.
View refer to the the template of the component.

ngAfterContentInit
The AfterContentInit is the Life cycle hook that angular calls after the Component’s content has been fully initialized and injected into Components View.
Angular also updates the properties decorated with the ContentChild and ContentChildren before raising this hook.
Angular calls this hook even if there is no projected content in the component

This hook fires after the ngDoCheck hook.
Fires only once, during the first change detection cycle, immediately after the creation of the component.

ngAfterContentChecked
AfterContentChecked is the life cycle hook, that angular calls during every change detection cycle after Angular completes the checking of the content for changes.
Angular also updates the properties decorated with the ContentChild and ContentChildren before raising this hook.
This hook fires after the ngDoCheck & AfterContentInit.

ngAfterViewInit
A lifecycle hook that Angular calls during the change detection after it completes initialization of component’s view and its child views.
Angular also updates the properties decorated with the ViewChild & ViewChildren properties before raising this hook.
Use this hook to handle any additional initialization tasks.
Fires only once, during the first change detection cycle, immediately after the creation of the component.

ngAfterViewChecked
A lifecycle hook that Angular calls after the change detector completes the checking of a component’s view and child views for changes.
Angular also updates the properties decorated with the ViewChild & ViewChildren properties before raising this hook.


I believe you will like this video, Please comment , like and share this video :)
Checkout other important topics :

#angular #angularTutorial #nishasingla

[akashraom]

This is one of the best video to understand the angular life cycle hooks. very simple and to the point. thank you so much.

[aiswaryas]

Your explanation helps me learn things in a clear, simple and understandable way . Thanks and keep rocking ❤

[AnujaChirantha]

You are explaining things so simply and clearly. Normally I do not subscribe to YouTube channels because I don't like getting notifications frequently. But I did subscribe to your channel. I am watching from Sri Lanka. Keep it up 👍

[keerthanapadubidri]

Thanks Nisha clear explanation now I know all about hooks

[kemidinaveen]

Thnq for explaining in brief mam, it helps alot.
please keep posting

[salonimalhotra]

Hi Nisha !!
Great Content . Thanks !!

[angularweb]

Hai Nisha..once again thank you for this video
and I really would like to know about how you understand the concepts and programming.
because the way you explain the content is too good that's why i am asking.

[sachinbonde]

Really nicely explained with real time example👍

[chanduBoddu]

Love u Man, Awesome explanation abut Hooks 🪝, 🙌

[jahanzaibijaz]

One after another ! Good going !nisha ☺️

[jackattack]

Am I correct that most of time the ngAfterContentChecked and ngAfterViewChecked are used is when we have input box kind of thing?

[bailappadukandar]

Tnq ma'm can u make one video crud operation

[pruthvirajmekala]

ngDoCheck is covering both ngAfterContentChecked and ngAfterView Checked is there any difference. I think ngDocheck will cover all possible changes of input, Am i missing anything ma'am.

[pruthvirajmekala]

if there is a input field in projected content how do we detect the change ??

[pruthvirajmekala]

okay got it may be those variables are undefined at that point

[ashishnayak]

Superb Explanation...can I have the source code Nisha of the lifecycle topics ...

[kemidinaveen]

Is the answer, ngOnChanges() correct ?

[shivaramkrishna]

poor likes for this costliest video...

[bhaskarreddy-bdhz]

since ngDocheck gets trigged for every change detection, i am able to apply the same logic using ngDocheck also.. so i am not sure why viewInit and ither life cycle hooks are there