When selecting a continent from the first mat-select, only the countries belonging to that continent should appear in the second mat-select options. For example, if Asia is chosen as the continent, only Asian countries should be displayed.
<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 selectedContinent.Countries" [value]="country">{{ country }}</mat-option>
</mat-select>
</mat-form-field>
</div>
Below is an example of the data structure used:
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"
]
}
];