cascading-dropdowns.component.ts

@Component({
  template: `
        <div>
            <label for="continent">Continent:</label>
            <select id="continent" [(ngModel)]="selectedContinent">
                @for(continent of continents; track continent) {
                    <option [value]="continent">{{ continent }}</option>
                }
            </select>
        </div>
        @if (selectedContinent()) {
            <div>
            <label for="country">Country:</label>
            <select id="country" [(ngModel)]="selectedCountry">
                @for (country of countries(); track country) {
                    <option [value]="country">{{ country }}</option>
                }
            </select>
        </div>
        }
    `,
})
export class CascadingDropdownsComponent {
  continents = [
    'Africa',
    'Asia',
    'Europe',
    'North America',
    'Oceania',
    'South America',
  ] as const;
  continentCountries = {
    Africa: ['Nigeria', 'Egypt', 'South Africa'],
    Asia: ['China', 'India', 'Japan'],
    Europe: ['Germany', 'France', 'United Kingdom'],
    'North America': ['United States', 'Canada', 'Mexico'],
    Oceania: ['Australia', 'New Zealand', 'Fiji'],
    'South America': ['Brazil', 'Argentina', 'Chile'],
  };

  selectedContinent = signal<typeof this.continents | ''>('');
  countries = computed(
    () => this.continentCountries[this.selectedContinent()] ?? []
  );
  selectedCountry = signal<string>('');
}