How to make a <ion-select> dependent on another <ion-select>

Ionic Framework Ionic Angular
1

`

                    <ion-label>Course</ion-label>

                    <ion-select >

                      <ion-select-option value="1">ABC</ion-select-option>

                      <ion-select-option value="2" >QWE</ion-select-option>

                      </ion-select>

                  </ion-item>

                    <ion-label >Preferences</ion-label>

                    <ion-select>

                      <ion-select-option value="1">ABC preference1</ion-select-option>

                      <ion-select-option value="2">ABC preference2</ion-select-option>

                    </ion-select>

                    <ion-select>

                      <ion-select-option value="1">QWE preference1</ion-select-option>

                      <ion-select-option value="2">QWE preference2</ion-select-option>

                    </ion-select>

                  </ion-item>

`

2

You need to implement a Function that runs if the first select has changed and format the options for the second Selecond

3

I don’t know if this is still relevant, but cascading selects used to require manual change detection triggering.

4

I have tried using (click) on the first select. But it is not working.
<ion-item> <ion-label>Course</ion-label> <ion-select > <ion-select-option value="1" (click)="onAbc()">Bsc</ion-select-option> <ion-select-option value="2" (click)="onQwe()">BCA</ion-select-option> </ion-select> </ion-item> <ion-item > <ion-label >Preferences</ion-label> <ion-select> <ion-select-option value="1">{{ preference1 }}</ion-select-option> <ion-select-option value="2">{{ preference2 }}</ion-select-option> </ion-select> </ion-item>
.TS file
`onAbc() {
this.preference1 = ‘ABC1’;
this.preference2 = ‘ABC2’;
}

onQwe() {
this.preference1 = ‘QWE1’;
this.preference2 = ‘QWE2’;
}`