Разница между (change) и (ngModelChange) в Angular

При разработке интерфейсов на Angular часто возникает потребность в отслеживании изменений в элементах формы. В Angular предусмотрены два события, которые позволяют это делать: (change) и (ngModelChange). Хотя на первый взгляд эти события выполняют одну и ту же функцию, между ними есть важные отличия.

Допустим, есть пример с текстовым вводом:

<input type="text" (change)="handleChange()" [(ngModel)]="name"/>

и

<input type="text" (ngModelChange)="handleChange()" [(ngModel)]="name"/>

В обоих примерах функция handleChange() вызывается при изменении текстового поля. Но когда именно она вызывается, зависит от используемого события.

Событие (change) возникает, когда пользователь изменяет значение элемента и затем убирает фокус из него, например, кликая в другое место страницы или нажимая клавишу Tab. Это стандартное поведение HTML и оно сохраняется в Angular.

Событие (ngModelChange), в свою очередь, возникает сразу при изменении значения элемента, не дожидаясь потери фокуса. Это поведение специфично для Angular и связано с его механизмом двустороннего связывания данных (two-way data binding).

По вопросу производительности, разница между (change) и (ngModelChange) не существенна и не должна влиять на выбор между ними. Выбор зависит от конкретной задачи и требуемого поведения интерфейса. Если необходимо реагировать на каждое изменение значения в реальном времени, следует использовать (ngModelChange). Если же достаточно реагировать на изменения только после того, как пользователь закончил ввод, то подойдет (change).