data binding between two select angular

Question

I have to select values in angular. I would like to connect two selects such as when I set the value of on the value of the other changes, too.

<select class="form-control" id="exampleFormControlSelect1">
    <option selected>--Sélectionnez--</option>
    <option  *ngFor="let item of names"[ngValue]="item">{{item}}</option>
</select>

<select class="form-control" id="exampleFormControlSelect2">
     <option selected>--Sélectionnez--</option>
     <option *ngFor="let item of names ; let i = index">{{i}}</option>
</select>

Answer 1

You can simply call a change event like below

<select (change)="onChange($event.target.value)" class="form-control" id="exampleFormControlSelect1">
    <option selected>--Sélectionnez--</option>
    <option *ngFor="let item of names" [ngValue]="item">{{item}}</option>
</select>

where onChange is a function in your typescript file and set the values for the other select (here, with id exampleFormControlSelect2) option.

onChange(deviceValue) {
    console.log(deviceValue);
}