Intercept input property changes with ngOnChanges()

1. import { Component, Input, OnChanges, SimpleChange } from '@angular/core';
2.  
3. @Component({
4. selector: 'app-version-child',
5. template: `
6. <h3>Version {{major}}.{{minor}}</h3>
7. <h4>Change log:</h4>
8. <ul>
9. <li *ngFor="let change of changeLog">{{change}}</li>
10. </ul>
11. `
12. })
13. export class VersionChildComponent implements OnChanges {
14. @Input() major: number;
15. @Input() minor: number;
16. changeLog: string[] = [];
17.  
18. ngOnChanges(changes: {[propKey: string]: SimpleChange}) {
19. let log: string[] = [];
20. for (let propName in changes) {
21. let changedProp = changes[propName];
22. let to = JSON.stringify(changedProp.currentValue);
23. if (changedProp.isFirstChange()) {
24. log.push(`Initial value of ${propName} set to ${to}`);
25. } else {
26. let from = JSON.stringify(changedProp.previousValue);
27. log.push(`${propName} changed from ${from} to ${to}`);
28. }
29. }
30. this.changeLog.push(log.join(', '));
31. }
32. }