I am trying to dynamically change the options in one dropdown based on the selection made in another dropdown.
ts.file
Countries: Array<any> = [
{ name: '1st of the month', states: [ {name: '16th of the month'} ] },
{ name: '2nd of the month', states: [ {name: '17th of the month'} ] },
{ name: '3rd of the month', states: [ {name: '18th of the month'} ] },
]
states: Array<any> = [];
cities: Array<any> = [];
changeCountry(country: any) {
this.states = this.Countries.find(cntry => cntry.name == country.target.value).states;
}
html.file
<mat-form-field>
<mat-select [(ngModel)]="custFirst" name="custFirst" placeholder="Country" (change)="changeCountry($event)">
<mat-option *ngFor="let country of Countries" [value]="country.name" > {{ country.name }}</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field>
<mat-select placeholder="State">
<mat-option *ngFor="let state of states" [value]="state.name">{{ state.name }}
</mat-option>
</mat-select>
</mat-form-field>
I am facing an issue where the value in the second dropdown is not being updated as expected. Can someone please assist me in resolving why the trigger part is not working?