Angular: Update Component when select-item changes (Angular runs on max CPU)

Question

I am trying to learn Angular but I am having a problem with a task which leads to some sort of infinite circle (I guess, no error messages so hard to tell).

I have a fairly simple objective. I have two text strings, and I want to update one of them via a dropdown menu. I manage to add the control but as soon as I try to wire it to the value in the component I seem to create some loop. I just hear the fans tuning-up and Angular running on max CPU without any output.

This is the component without the two-way binding:

export class TokenComponent implements OnInit {

  @Input() text: string;
  @Input() label: string;

  constructor() { 
  }

  ngOnInit(): void {
  }
  tagset() {
    return ["PER", "O", "ORG", "LOC"];
  }

}

and the html:

<div>
{{text}}
{{label}}
</div>
<select>
    <option *ngFor="let tag of tagset()" [selected]="tag === label">{{tag}}</option>
</select>

This works so far, the GUI element is responsive and changes its value but does of course not reflect the changes yet. I thought adding

[(ngModel)]=label

would do the trick. I want to update the {{label}} value I output above the dropdown when I choose another option. Adding this ngModel causes some problem for Angular. The app crashes without any error messages or alike. I have to restart the ng server and reopen the browser window (and remove ngModel again) to recover this issue.

Can anyone help me? This is probably some obvious nooby issue? I am not sure what the cause is so I would be grateful for any kind of pointers.

Answer 1

i think instead of using [(ngModel)]=label use (selectionChange)="onChange($event.target.value)"

selectionChange tigger once fire when dropdown selection change

<mat-select[(ngModel)]="label">
<mat-option 
 *ngFor="let tag of tagset()" [selected]="tag === label" >
   {{tag}}
</mat-option>

to

<mat-select  (selectionChange)="onChange($event.target.value)">
<mat-option  [value]="tag"
 *ngFor="let tag of tagset()" [selected]="tag === label" >
   {{tag}}
</mat-option>

on .ts file

     onChange(value){
// do logica part 
    console.log(value)
    }