What is the best ng-change/ngChange event for Angular 5 to fire a custom function?

Question

I am trying to get the ng-change event to update a function I wrote by doing this. For now, the function only logs "I am here" to the console. I am implementing it like this:

<input type="number" ng-minlength="1" ng-maxlength="3" min="5" max="100" class="form-control" name="percentOwnership" (ng-change)="fullyOwned()"  [(ngModel)]="individualowner.percentOwnership">

I have tried to take off the one-way binding parens and also adding the two-way binding parens and brackets, but nothing fires my function to log "I am here" to the console.

I have also tried these combinations by using "change" and "ngModelChange". Still, nothing fires my function. I am using Angular 5.2.9

Sir or madam, you spelled it wrong. Read the documentation. It is `(ngChange)` or `(ngModelChange)` — Aluan Haddad, Apr 11 '18 at 14:18

score 4 · Accepted Answer · answered Apr 11 '18 at 22:51

You need to use [ngModel] and (ngModelChange) separately.

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
    <input type="number" [ngModel]="percent" (ngModelChange)="onPercentChange($event)" />
  `,
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  percent = 20;

  onPercentChange(percent: number) {
    console.log('here');  

    this.percent = percent;
  }
}

Live demo

Also your min="5" max="100" validations will not work as expected. They have been removed in Angular 4.2. Read more about the issue.

What is the best ng-change/ngChange event for Angular 5 to fire a custom function?

1 Answers1