Angular Life Cycle Hook | ngOnInit vs constructor| Component Life Cycle Hooks (Part-1) (Tutorial 41)

Hello Everyone
This video will cover about Life Cycle hooks in Angular and its type.
I have covered about constructor and ngOnInit in detail in this video

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

We have worked with Components and Directives in Angular quite a lot now. And if you are new to Components or directives, refer here. When dealing with components or directives, there is a sequence of steps that are performed to build an angular application from its initialization to its destruction.

The lifecycle of a component/directive is managed by Angular as it creates, checks, updates, renders, and destroys.

To have a view of all these occurrences and respond to these moments, Angular provides lifecycle hooks which give us visibility into these.
Life cycle hooks in simple way we can say, that it is nothing but simple functions that a developer can call during a specific point of the life of a component in their Angular application.

There are 8 distinct kinds of hooks in the lifecycle of a component or directive.

1)ngOnChanges
2)ngOnInit
3)ngDoCheck
4)ngAfterContentInit
5)ngAfterContentChecked
6)ngAfterViewInit
7)ngAfterViewChecked
8)ngOnDestroy

Constructor:


A constructor is a special method that will be called whenever we create new objects. It is a feature of the class(typescript) itself, an object-oriented design concept. A constructor is also used to initialise the class members.

When we talk about angular components, constructor we use to inject dependencies. Angular always executes the constructor method first then all lifecycle hooks will come into the picture

ngOnInit: This lifecycle hook is the most usable hook as we can initialise all methods and variables here in it. When we need to initialise any method where we can have the logic of getting initial data for a component then we can use ngOnInit() to call that method. This lifecycle hook will implement after all data bound properties to get called so we will have all properties to use initially. Basically, this lifecycle hook will call once and after ngOnChanges() called

Checkout other important topics :

#angular #angularTutorial #nishasingla

[shrgai]

These life cycles are quite actually life savers when creating lots of cool features in the app. I would recommend them in animations on angular. They are awesome👍

[binodkumarsahu]

I learned about RxJs, and it helped me a lot.

[lopamudrasahu]

Nisha your video is superb. excellent explanation. I have seen so many other videos but your explanation style is unique and simple. keep doing good. thank you.

[eshwarmoorthy]

Thanks mam. Video with good explanation.

[veereshsirsi]

hello nisha so great of u ...can u make a video on singleTone service of not injecting it again and again in the component only once injected. I hope u got what i am trying to say. And plz let me know hot to create dynamic components not using cli and not in static. Thanks in adv😄

[akaris]

Thank you for this wonderful content, please add Angular debugging this playlist

[shubhamgaygol]

Nisha could please upload videos on typescript?

[mohdayan]

If we did any changes in the component then sometimes we call ngoninit() so then how can I Sayed it called only once

[shivas]

can you please make a video on viewEncapsulation ?in Angular

[kotireddy]

We also load the data in constructor but what is difference between constructor and ngonInt