Carlos Cifuentes
AngularJS → Angular reference

ng-change / ng-blur / ng-keyup in modern Angular

Every ng-event directive becomes an event binding in parentheses with the native DOM event name. ng-change becomes a subscription to the form control.

Before · AngularJS
<input ng-model="vm.query"
       ng-change="vm.search()"
       ng-blur="vm.touched = true"
       ng-keyup="$event.keyCode === 13 && vm.submit()">
<button ng-click="vm.clear($event)">Clear</button>
After · Angular
<input [formControl]="query"
       (blur)="touched.set(true)"
       (keyup.enter)="submit()" />
<button (click)="clear($event)">Clear</button>

// component
query = new FormControl('', { nonNullable: true });

constructor() {
  this.query.valueChanges
    .pipe(debounceTime(300), takeUntilDestroyed())
    .subscribe(() => this.search());
}

What changes

  • ng-click, ng-blur, ng-keyup and the rest become (click), (blur), (keyup); $event is still available.
  • Key filters like (keyup.enter) replace manual keyCode checks.
  • ng-change becomes valueChanges on a FormControl, or (ngModelChange) when you use ngModel.

Migration tip. ng-change only fired for changes made by the user. valueChanges also emits when code calls setValue, so pass emitEvent: false where a handler would otherwise trigger itself.

Related

Planning a migration or a micro-frontend platform?

In a 20-minute call you describe your situation and I tell you how I'd approach it. If it isn't worth doing yet, I'll say so.

Message me on LinkedIn