Display different mat-options depending on what value another mat-select has-CodePudding

I have two mat-selects; the first one you choose between different continents. The second mat-select has countries as options. My question is if I for example choose Asia as my option on the first mat-select, I only want the Asian countries to show as options in the second mat-select and not the other countries.

<div class="form">
 <mat-form-field>
  <mat-label>Continents</mat-label>
  <mat-select>
   <mat-option *ngFor="let continent of formData" [value]="continent.Continent">{{ continent.Continent }}</mat-option>
  </mat-select>
 </mat-form-field>

 <mat-form-field>
  <mat-label>Countries</mat-label>
  <mat-select>
   <mat-option *ngFor="let country of formData" [value]="country.Countries">{{country.Countries }}</mat-option>
  </mat-select>
 </mat-form-field>
</div>

Here is my formData in Typescript

export const formData = [
{
 Continent: "Africa",
 Countries: [
  "Nigeria",
  "Egypt",
  "Ethiopia"
 ]
},
{
 Continent: "Europe",
 Countries: [
  "Sweden",
  "Italy",
  "Hungary"
 ]
},
{
 Continent: "North America",
 Countries: [
  "United States of America",
  "Canada",
  "Mexico"
 ]
},
{
 Continent: "South America",
 Countries: [
  "Peru",
  "Argentina",
  "Colombia"
 ]
},
{
 Continent: "Asia",
 Countries: [
  "Malaysia",
  "Iran",
  "Japan"
 ]
},
{
 Continent: "Australia/Oceania",
 Countries: [
  "Fiji",
  "Australia",
  "New Zealand"
 ]
}
];

CodePudding user response：

I'm not very familiar with Angular, but to the best of my knowledge it looks like you'll want to retrieve the value of <mat-select>. The best way to do this would be to use the two-way binding syntax from Angular, as described here. You'll also want to change your countries selector so that it filters the results based on the selected continent.

Based on the above, it would look something like this in your example:

In your component .html:

...
  <mat-select [(value)]="selectedContinent">
     <mat-option *ngFor="let continent of formData" [value]="continent.Continent">{{ continent.Continent }}</mat-option>
  </mat-select>
...
  <mat-select>
   <mat-option *ngFor="let continent of filteredFormData" [value]="continent .Countries">{{country.Countries }}</mat-option>
  </mat-select>
...

In your component .ts:

...
  selectedContinent?: string;
  get filteredFormData() {
    // selectedContinent would be undefined if no option is selected
    // therefore, we return all of the continents
    if (!selectedContinent) return formData;
    // filter out all of the continents that don't match the criteria
    return formData.filter(entry => entry.Continent === this.selectedContinent);
  }
...

Alternatively, you could inline filtering into your second selector using *ngIf.

CodePudding user response：

Create variable for selected entry (for example selectedContinent) and bind it in first select, after that use it for get countries in second select:

<div class="form">
 <mat-form-field>
  <mat-label>Continents</mat-label>
  <mat-select [(ngModel)]="selectedContinent">
   <mat-option *ngFor="let continent of formData" [value]="continent">{{ continent.Continent }}</mat-option>
  </mat-select>
 </mat-form-field>

 <mat-form-field>
  <mat-label>Countries</mat-label>
  <mat-select>
   <mat-option *ngFor="let country of selectedContinent.Countries" [value]="country">{{ country }}</mat-option>
  </mat-select>
 </mat-form-field>
</div>