Within one component, I have a dropdown list. Whenever the value of the dropdown changes, I am attempting to detect this change in value in another component. However, I am encountering an unusual issue. Sometimes, changing the dropdown value triggers the ngOnChanges function, while other times it does not. The reason for this inconsistency is unknown.
This represents the 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 shown in the browser console, there are instances where the change is detected and others where it is not.
Change not detected:
https://i.stack.imgur.com/qcv6o.png
Change detected: