ngOnChanges is not triggered when value changes from select

Question

I have next html:

<select  [(ngModel)]="district"  class="form-control" (change)="dsChange()">

      <option disabled hidden [value]="undefined" >Ноҳия</option>

      <option *ngFor="let dis of districts" [ngValue]="dis">{{dis.title}}</option>
</select>

Also I have next component

@Input() district: District;
 ngOnChanges(changes: SimpleChanges) {
      console.log("CHANGED")
}
 dsChange(){
      console.log(this.district);
}

And I can not understand why when I select some value dsChange is triggered with correct value of district, but ngOnChanges() not

This has to do with interaction between components, which is where @ Input and @ Output are used and is covered here: https://angular.io/guide/component-interaction — Z. Bagley, Jun 24 '17 at 16:23

score 6 · Accepted Answer · answered Jun 24 '17 at 16:32

ngOnChanges is called when a component's data-bound input properties change. In your case, it would be called if the parent component sets a new value for @Input() district.

See the docs

ngOnChanges()

Respond when Angular (re)sets data-bound input properties...Called before ngOnInit() and whenever one or more data-bound input properties change.

score 1 · Answer 2 · edited Jul 12 '17 at 13:58

1

It's not calling the onChanges even though the variable is local to the component.I created a plukr for this:

https://plnkr.co/edit/lsqyeZ8aiBpylciOQxnU?p=preview

edited Jul 12 '17 at 13:58

msanford

11,803
11
66
93

answered Jul 12 '17 at 01:38

Konda Reddy Yaramala

11
4

ngOnChanges is not triggered when value changes from select

2 Answers2

ngOnChanges()