Angular input change detection using property setter

Suggested Videos
Part 32 - Angular switch case example | Text | Slides
Part 33 - Pass data from parent to child component in angular | Text | Slides
Part 34 - Angular component input property change detection | Text | Slides

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


In our previous video we discussed, detecting and reacting to INPUT property changes using ngOnChanges life cycle hook. In this video we will discuss doing the same using a Property Setter instead.


Detecting and reacting to Input property changes using Property Setter

// Private backing field for the property

private _employee: Employee;

// This property setter is called anytime the input property changes

// Notice the code here logs the previous and current employee names

@Input()

set employee(val: Employee) {

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

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

  this._employee = val;

}

// This getter is called when reading and displaying data

get employee(): Employee {

  return this._employee;

}

At this point you might be thinking, there are 2 ways to detect and react to Input property changes (Property Setter and ngOnChanges life cycle hook). What is the difference between the two and when to use one over the other. We will answer these 2 questions in our next video.