Change dropdown based on another dropdown in Angular 11?

Question

I want to change dropdown based on 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>

Now my problem is that, I unable to get the value in second dropdown. Please help me why trigger part is not working.

here is the picture of dropdowns

Do you want to autopopulate the value selected in second dropdown based on first one? — deepakchethan
– deepakchethan, Commented Oct 7, 2021 at 3:17

deepakchethan · Accepted Answer · 2021-10-07 03:47:55Z

2

The change event should be changed to selectionChange. If you want the state to be auto-selected add [(ngModel)] to the state dropdown and update it when the country is changed:

 changeCountry(country: any) { 
    this.states = this.Countries.find(
      (cntry) => cntry.name == country.value
    ).states;
    this.sFirst = this.states[0].name;
 }

<mat-form-field>
    <mat-select  [(ngModel)]="custFirst"  name="custFirst" placeholder="Country" (selectionChange)="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" [(ngModel)]="stateFirst">
         <mat-option *ngFor="let state of states"  [value]="state.name">{{ state.name }} 
         </mat-option>
       </mat-select>
</mat-form-field>

Working example: https://stackblitz.com/edit/angular-6-stackoverflow-nzvqse?file=src/app/components/stackoverflow-solution/stackoverflow-solution.component.ts

edited Oct 7, 2021 at 3:47

answered Oct 7, 2021 at 3:24

deepakchethan

5,6401 gold badge26 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Mohamed Irshath Over a year ago

After selecting country dropdown , it should trigger changecountry function but in my case trigger is not happening .

deepakchethan Over a year ago

@MohamedIrshath Can you change (change) to (selectionChange) and try?

Mohamed Irshath Over a year ago

it throws error " Cannot read properties of undefined (reading 'value')" @deepak

deepakchethan Over a year ago

@MohamedIrshath, Please update the changeCountry method as well as per the latest edit

deepakchethan Over a year ago

@MohamedIrshath. Please see the latest update or the stackblitz. You will have to update two way binded variable this.sFirst = this.states[0].name; in countryChange

|

sonEtLumiere · Accepted Answer · 2021-10-07 03:16:27Z

0

You can handle that with a switch case statements, pass the value of country to the function getStates

country:string = 'Uruguay';
states:string[];

getStates(country: string){
   switch(country) {
      case '':
        this.states = [];
        break;
      case 'República Dominicana':
        this.states = ['', 'Azua', 'Baoruco', 'Barahona', 'Valverde'];
        break;
      case 'Uruguay':
        this.states = ['', 'Artigas', 'Canelones', 'Tacuarembó'];
        break;
      case 'Venezuela':
        this.states = ['', 'Amazonas', 'Apure', 'Yaracuy'];
        break;            
   }
}

this.getCountryData(this.country);

then in view:

 <mat-option *ngFor="let state of states"  [value]="state.name">{{ state.name }}

answered Oct 7, 2021 at 3:16

sonEtLumiere

4,6223 gold badges15 silver badges48 bronze badges

3 Comments

Mohamed Irshath Over a year ago

I unable to get your point . please more specific

sonEtLumiere Over a year ago

You can have two array variables: countries and states, you can first create a dropdown based on countries variable, and call a function (getStates) that updates the states variable

sonEtLumiere Over a year ago

then you can create another dropdown based on states array variable

Collectives™ on Stack Overflow

Change dropdown based on another dropdown in Angular 11?

2 Answers 2

6 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related