Tutorial by Examples

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.'] }) ...

Fired when the component or directive instance is destroyed. import { Component, OnDestroy } from '@angular/core'; @Component({ selector: 'so-ondestroy-component', templateUrl: 'ondestroy-component.html', styleUrls: ['ondestroy-component.'] }) class OnDestroyComponent implements...

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 ...

Fire after the initialization of the content of the component or directive has finished. (Right after OnInit) import { Component, AfterContentInit } from '@angular/core'; @Component({ selector: 'so-aftercontentinit-component', templateUrl: 'aftercontentinit-component.html', styl...

Fire after the view has been fully initialized. (Only available for components) import { Component, AfterContentChecked } from '@angular/core'; @Component({ selector: 'so-aftercontentchecked-component', templateUrl: 'aftercontentchecked-component.html', styleUrls: ['aftercontentc...

Fires after initializing both the component view and any of its child views. This is a useful lifecycle hook for plugins outside of the Angular 2 ecosystem. For example, you could use this method to initialize a jQuery date picker based on the markup that Angular 2 has rendered. import { Component,...

Fire after the check of the view, of the component, has finished. (Only available for components) import { Component, AfterViewChecked } from '@angular/core'; @Component({ selector: 'so-afterviewchecked-component', templateUrl: 'afterviewchecked-component.html', styleUrls: ['afte...

Allows to listen for changes only on specified properties import { Component, DoCheck, Input } from '@angular/core'; @Component({ selector: 'so-docheck-component', templateUrl: 'docheck-component.html', styleUrls: ['docheck-component.'] }) class DoCheckComponent implements DoChe...