Angular Life Cycle Hook #Part2 | ngOnChanges vs ngDoCheck | (Tutorial 42)

Hello Everyone
This is part-2 on Angular Life Cycle Hook and will talk about ngOnChanges and ngDoCheck 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 Life Cycle hook Part-1:

ngOnChanges:

This method is called once on component’s creation and then every time changes are detected in one of the component’s input properties.

It receives a SimpleChanges object as a parameter, which contains information regarding which of the input properties has changed - in case we have more than one - and its current and previous values.



This is one of the lifecycle hooks which can come in handy in multiple use cases. It is very useful if you need to handle any specific logic in the component based on the received input property

ngOnChanges() will fire before ngOnInit() and every time parentData updated from its parent component

When should you use ngOnChanges?
Use ngOnChanges whenever you want to detect changes from a variable decorated by @Input. Remember that only changes from the parent component will trigger this function.
Also remember that changes from the parent still update the child value even without implementing ngOnChanges. ngOnChanges simply adds the benefit of tracking those changes with previous and current value.

ngOnChanges change detection

ngOnChanges is triggered every time when the Angular detected a change to the data-bound input property
We also looked at how OnChanges does not fire when the input property is an array/object because Angular uses dirty checking to compare the properties.
In such a scenario, where Angular fails to detect the changes to the input property, the DoCheck allows us to implement our custom change detection.

ngDoCheck

Detect and act upon changes that Angular can’t or won’t detect on its own.

Called during every change detection run, immediately after ngOnChanges() and ngOnInit().

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

#angular #angularTutorial #nishasingla

[sathishkumars]

I have never seen like your teaching way and brief explanation, this is what exactly I was looking for, Thank you so much😍👏👏👏

[rajmaidu]

Thanks for simplifying it to the extent that the examples make it even easy to understand. Never came across anyone explaining these so precisely and with basic examples 👏. You made my day!!! Finally learnt Lifecycle hooks😄

[sabyasachidas]

I think this is the best explanation I have ever come across for life cycle hooks

[ashokece]

Pls post video continues.. very useful for me.. everything I can understand easily.. mam..

[yadavkumar]

Wow. What an excellent explanation about life cycle hooks from u. Actually I had been struggling to understand the use of each and every method for long time. But today iam very clear after I watched ur video. Thanks a lot for clarifying my doubts.

[mohdali-yqgq]

Ma'am, Your teaching skills are amazing which helps a lot to understand the things in a very clear cut way. Thanks for your creative contents.

[jagdishrohit]

Thanks for making this kind of very useful vedio.

[gajanangogurwar]

Very clean and clear explaination..thank you..

[jagdishrohit]

please continue to make this kind of video.

[RajasthaniChora]

Nice explanation ma'am. Please make video on ngrx from scratch.

[rrrrrrrrrrrrrrrrrr]

Good. Nice explanation. Please make videos on Rxjs exclusively.

[ananyajain]

Hi Nisha, This was really a wonderful explanation.❤Thank you so much for putting this up, this is quite helpful. I just have a one query regarding ngDoCheck. Can we get previousValue and currentValue for object/array updations in ngDoCheck how we were getting in ngOnChanges?

[jahanzaibijaz]

Thanks a lot. Each video is consist of exploring and learning :)

[aravindkumar]

Hi nisha, having one doubt from min 17..we r updating product object only after clicking on update project from parent component right... After clicking on button only we r updating product object.. But y ngdocheck calling every time if the focus on just input field..

[ruchitpatel]

Hello Nisha, Thanks for the great content.
Have a question, about the Angular itself.
I have been listening that google have stopped the further support for Angular since this January. What does that mean ? Is it gonna be still in the market in long term future ?

[ermahesh]

Hi mam in ngDocheck how we come to know that product values changes or not, like onchange we have simplechange previous and current value

[hitechofficial]

@Nisha Singla i have a question? please if we dnt have a parent to child relationshp, and i have only one component and i am using form for registeration and i do have many input fields inside the form so will this ngonchnages clal or not?

[guduguntlasuryateja]

If same component have input element then ngChange run?

[saroshfaisalkhan]

When Allah wants to bless upon me, Allah meet me with great teacher. " I sort-out best book among the many which is getting dust over the shelf".

[mohini]

Anyone know how to get images in grid using drag features