Life Scope In Angular2
Posted By : Pankaj Kumar Thakur | 30-Nov-2017
Introduction
In AngularJs we had access to an attribute directive called ( ng-init ), where we could run a method from our $scope on the page initialization procedure.
This LifeCycle hooks now been expanded in angular2 to support a varity of events that we can target to show different types of functionality in angular2.
Some Important Types Of LifeCycle Hooks used .
1. ngOnChange.
2. ngOnInit.
3. ngOnDestroy.
1. ngOnInit : - This lifecycle property called only once when component loaded at first time.
for example :- suppose we have student.ts component and we want to show a alert when application running in first time>
like a welcome message "welcome to xavier school"
To complete this goal we create a method in ngOnInit like:-
<html>
ngOnInit(){
this.showMessage();
}
showMessage(){
alert("hai pankaj")
}
</html>
2. ngOnChanges :- when the value of a data bound property changes this method is called .
<html>
@Input() inputData: InputData;
ngOnChanges(){
console.log(this.inputData)
}
</html>
3.ngOnDestroy :- This method is called when angular deleted or remove the component and directive it removed from the page .
4. ngDoCheck :- This method called when any changes made after ngOnInit and ngOnDestroy.
5. ngAfterContentInit :- This method callled after first ngDoCheck.
6. ngAfterViewChecked :- This method called after ngAfterViewInit.
reference :- https://v2.angular.io/docs/ts/latest/guide/lifecycle-hooks.html
https://www.tutorialspoint.com/angular2/angular2_lifecycle_hooks.htm
https://stackoverflow.com/questions/41726875/angular2-input-change-detection
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
Pankaj Kumar Thakur
Pankaj is a MEAN stack developer and expertise in Front-End for web application using Angulajs,Angularjs2/4 with Framework Ionic,Bootstarp,Javascript and Html5 css3, Singing and Reading are includes in his Hobbies.