Angular：ngOnChanges是否不检测更改？

Question

I've a dropdown list in one component . Each time the value of dropdown changes I'm trying to detect the changed value in another component . But I've a strange problem. Sometimes, when I change the value of dropdown it's triggering the ngOnChanges and sometimes not. Idk why.

This is my code:

AppComp

html

    <td width="20%" class="cursor">
      <select (change)="changedvalue($event)" class="form-control" name="level">
        <option  hidden selected> -- Select options -- </option>
        <option>Level 1</option>
        <option>Level 2</option>
      </select>
    </td>

   <td class="cursor">
     <app-other-comp [group]="group"></app-other-comp>
   </td>

ts

group: string;

changedvalue(event: Event) {
   const value = (<HTMLSelectElement>event.target).value;
   this.group = value;
   console.log('From AppComp' + this.group);
  }

OtherComp

ts

@Input() group: string;

ngOnChanges() {
    console.log('Changed : ' + this.group);
  }

As in the browser console you can see sometimes it detects a change and sometimes it does not.

change doesn't get detected:

change gets detected:

Answer 1

change function is called when input blurred. you can use ngModel and ngModelChange function like this:

<td width="20%" class="cursor">
  <select (ngModelChange)="changedvalue($event)" [(ngModel)]="value"  class="form-control" name="level">
    <option  hidden selected> -- Select options -- </option>
    <option>Level 1</option>
    <option>Level 2</option>
  </select>
</td>

<td class="cursor">
 <app-other-comp [group]="group"></app-other-comp>
</td>