Хук ngOnChanges в Angular

Хук ngOnChanges работает при изменении дочернего компонента родительским Реагирует, когда Angular устанавливает или сбрасывает привязанные к данным свойства ввода. Метод получает объект SimpleChanges с текущим и предыдущим значениями свойств. Это происходит часто, поэтому любые операции, выполняемые здесь, существенно влияют на производительность. Вызывается перед ngOnInit() (если у компонента есть связанные входы) и всякий раз, когда одно или несколько связанных с данными входных свойств изменяются. Если у вашего компонента нет входов или вы используете его, не предоставляя никаких входов, фреймворк не будет вызывать ngOnChanges().

export class AppComponent {
	public name: string = '111'
	
	meth() {
		this.name = '222';
	}
}

<app-user [name]="name"></app-user>

<button (click)="meth()">button</button>

Метод ngOnChanges автоматически вызывается при изменении свойств компонента. Он срабатывает перед инициализацией компонента, т.е. перед методом ngOnInit.

При этом в методе можно получить текущее и предыдущее значение измененного свойства класса компонента. Для этого нужно в метод ngOnChanges передать параметр SimpleChanges.

В этом случае перед работой с данным методом нам необходимо импортировать следующие интерфейсы и компоненты:

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

export class UserComponent implements OnChanges {
	@Input()
	public name: string = ''
	
	ngOnChanges(changes: SimpleChanges) {
		let data = changes['name']; // имя свойства
		let curr = data.currentValue;
		let prev = data.previousValue;
		
		console.log('changes', prev, curr);
	}
}