Angular patch value with numbers for multiselect in reactive forms

Question

Hi i'm wondering why the patch value doesnt work with when using numbers. I have a select which gets populated with a number for the value and i get a array of numbers from the backend which i use to set the value. But this doesnt work. But when the array values are converted to string it works.

<mat-select formControlName="location" placeholder="Event Type" >
   <mat-option  *ngFor='let loc of locations'  value="{{loc.id}}">{{loc.name}}</mat-option>
</mat-select>

this is used to set the value

  setParticipants(value) {
    this.AddEventForm.patchValue({
      participants: value
    });
  }

the value that gets passed to set participants is [84,118] is something like this

EDIT- Created a stackblitz https://stackblitz.com/edit/angular-dvb4y5

Answer 1

The way of binding the property value makes the difference.

If you bind like below, it will convert the data type to string .

 <option *ngFor='let val of list' value='{{val.id}}'>{{val.name}}</option>

If you bind as below, it will bind the actual data type.

 <option *ngFor='let val of list' [value]='val.id'>{{val.name}}</option>