Angular

Chapter 20: Lifecycle Hooks
Section 20.1: OnChanges
Fired when one or more of the component or directive properties have been changed.
import { Component, OnChanges, Input } from '@angular/core';
@Component({
selector: 'so-onchanges-component',
templateUrl: 'onchanges-component.html',
styleUrls: ['onchanges-component.']
})
class OnChangesComponent implements OnChanges {
@Input() name: string;
message: string;
}
ngOnChanges(changes: SimpleChanges): void {
console.log(changes);
}
On change event will log
name: {
currentValue: 'new name value',
previousValue: 'old name value'
},
message: {
currentValue: 'new message value',
previousValue: 'old message value'
}
Section 20.2: OnInit
Fired when component or directive properties have been initialized.
(Before those of the child directives)
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'so-oninit-component',
templateUrl: 'oninit-component.html',
styleUrls: ['oninit-component.']
})
class OnInitComponent implements OnInit {
}
ngOnInit(): void {
console.log('Component is ready !');
}
Section 20.3: OnDestroy
Fired when the component or directive instance is destroyed.
GoalKicker.com – Angular 2 Notes for Professionals 91