Angular 2 Lifecycle Hooks OnChanges


Fired when one or more of the component or directive properties have been changed.

import { Component, OnChanges, Input } from '@angular/core';

    selector: 'so-onchanges-component',
    templateUrl: 'onchanges-component.html',
    styleUrls: ['onchanges-component.']
class OnChangesComponent implements OnChanges {
    @Input() name: string;
    message: string;
    ngOnChanges(changes: SimpleChanges): void {

On change event will log

name: {
    currentValue: 'new name value',
    previousValue: 'old name value'
message: {
    currentValue: 'new message value',
    previousValue: 'old message value'