Angular component input property change detection

Suggested Videos
Part 31 - Create operation in angular | Text | Slides
Part 32 - Angular switch case example | Text | Slides
Part 33 - Pass data from parent to child component in angular | Text | Slides

In this video we will discuss how to detect and react when component input property value changes. This is continuation to Part 33. Please watch Part 33 from Angular CRUD tutorial before proceeding.


To detect and react when an input property value changes, we have 2 options. We can either use

• Property Setter
• ngOnChanges Life Cycle Hook

If you are new to Angular Life Cycle hooks, please check out Part 24 from Angular 2 tutorial.

To understand these 2 approaches, let's modify ListEmployeesComponent as shown below. Notice instead of displaying all the employees at once, we have "View Next Employee" button which cycles through the list of employees, displaying one employee at a time.



To achieve this modify the code in list-employees.component.html file as shown below.

<button (click)="nextEmployee()" class="btn btn-primary">

  View Next Employee

</button>

<br/><br/>

<app-employee-display [employee]="employeeToDisplay">

</app-employee-display>

Modify the code in list-employees.component.ts as shown below.

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

import { Employee } from '../models/employee.model';

import { EmployeeService } from './employee.service';

@Component({

  templateUrl: './list-employees.component.html',

  styleUrls: ['./list-employees.component.css']

})

export class ListEmployeesComponent implements OnInit {

  employees: Employee[];

  employeeToDisplay: Employee;
  private arrayIndex = 1;

  constructor(private _employeeService: EmployeeService) { }

  ngOnInit() {

    this.employees = this._employeeService.getEmployees();

    this.employeeToDisplay = this.employees[0];

  }

  nextEmployee(): void {

    if (this.employeeToDisplay.id <= 2) {

      this.employeeToDisplay = this.employees[this.arrayIndex];
      this.arrayIndex++;

    } else {

      this.employeeToDisplay = this.employees[0];
      this.arrayIndex = 1;

    }

  }

}

At this point view the page in the browser. Notice only one employee is displayed. Click "View Next Employee" button to see the next employee. It is the child component (DisplayEmployeeComponent) that displays the employee details. For the child component to be able to display the employee details, the parent component is passing the employee object to the child component using the child component input property. 

So every time we click the "View Next Employee" button, the INPUT property value changes. When this happens we want to detect the change and react. Let us say for example, we want to log to the console the previously displayed employee name and the currently displayed employee name.

We can achieve this either by using ngOnChanges life cycle hook or Property Setter. Let's look at both the ways.

Detecting and reacting to Input property changes using ngOnChanges life cycle hook

// This life cycle hook receives SimpleChanges as an Input parameter

// We can use it to retrieve previous and current values as shown below

ngOnChanges(changes: SimpleChanges) {

  const previousEmployee = <Employee>changes.employee.previousValue;

  const currentEmployee = <Employee>changes.employee.currentValue;

  console.log('Previous : ' + (previousEmployee ? previousEmployee.name : 'NULL') );

  console.log('Current : ' + currentEmployee.name);

}

Next Video : Detecting and reacting to Input property changes using Property Setter