ngOnInit Lifecycle Hook | ngOnInit Vs Constructor -Part 24
This video is about Angular Lifecycle Hooks ngOnInit().
To learn Angular2 from scratch and for beginners Please see the link below:
• What is AngularJS and What is Angular...
Watch More Videos On: / @codewithrohini1636 .
#LifecycleHooks #ngOnInitVsConstructor
please read in detail about the angular lifecycle hooks on the below link:
https://angular.io/guide/lifecycle-hooks
In this tutorial, we discuss ngOnInit hook method.
Also, what is the difference between ngOnInit and Constructor and the advantages of using ngOnInit over the constructor?
We see with the example of how the lifecycle hook methods are working sequentially or which method is executed first or last.
Each interface has a single hook method whose name is the interface name prefixed with ng. For example, the OnInit interface has a hook method named ngOnInit() that Angular calls shortly after creating the component.
Constructor:
It is called only once in the lifecycle and before the ngOnInit() hook method.
ngOnInit()
Executes after the constructor and after ngOnChange hook for the first time. It is most commonly used for component initialization and retrieving data from a database.
Called once, after the first ngOnChanges().
Use ngOnInit() for two main reasons:
-To perform complex initializations shortly after construction.
-To set up the component after Angular sets the input properties.
Example:
import { Component, Input, OnChanges, SimpleChanges, OnInit } from '@angular/core';
@Component({
selector: 'app-simple',
template: `
[p] You Entered: {{simpleInput}}[/p]
[div ]{{values}} [/div]
`,
styles: []
})
export class SimpleComponent implements OnChanges, OnInit {
@Input()
simpleInput: string;
values = '';
constructor() {
console.log('Constructor is called');
}
ngOnInit(): void {
// Called after the constructor, initializing input properties, and the first call to ngOnChanges.
// Add 'implements OnInit' to the class.
this.values = 'Hello World';
console.log('ngOnInit Hook method is called');
}
ngOnChanges(changes: SimpleChanges) {
// tslint:disable-next-line:forin
for (let propertyName in changes) {
let change = changes[propertyName];
let current = JSON.stringify(change.currentValue);
let previous = JSON.stringify(change.previousValue);
console.log('ngOnChanges Hook method is called');
console.log(propertyName + ':currentValue= ' + current + ', previousValue= ' + previous);
}
}
}
So, When we run our application we see the output as:
-First, Constructor is called
ngOnChanges Hook method is called
And at last, ngOnInit Hook method is called
This is actually a sequence of lifecycle works.
And suppose when we write the ngOnInit() before the constructor then this method is never called, only the constructor and ngOnChanges() will be called because lifecycle hook says ngOnInit is called after the constructor.
And when we run the application second time then only the ngOnChanges() method is called since constructor and ngOnInit() is called only once.
Watch video ngOnInit Lifecycle Hook | ngOnInit Vs Constructor -Part 24 online without registration, duration hours minute second in high quality. This video was added by user Code With Rohini 29 August 2019, don't forget to share it with your friends and acquaintances, it has been viewed on our site 495 once and liked it 9 people.