angular.html

<select [value]="selectedState()" (change)="onStateChange($event)">
  <option *ngFor="let state of states()" [value]="state">
    {{ state }}
  </option>
</select>

<select 
  [value]="selectedCity()" 
  (change)="onCityChange($event)"
  [disabled]="isPending()">
  <option *ngFor="let city of cities()" [value]="city">
    {{ city }}
  </option>
</select>

<p>Selection: {{ selectedCity() }}, {{ selectedState() }}</p>

angular.ts

import { Component, computed, effect, signal } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { getStates, getCities } from './data';

@Component({
  selector: 'app-location-selector',
  standalone: true,
  imports: [CommonModule, FormsModule],
  templateUrl: './location-selector.component.html',
  styleUrls: ['./location-selector.component.css']
})
export class LocationSelectorComponent {
  states = signal<string[]>([]);
  selectedState = signal<string>('');
  cities = signal<string[]>([]);
  selectedCity = signal<string>('');
  isPending = signal<boolean>(false);

  constructor() {
    this.loadStates();
    
    // React to state changes and load cities
    effect(() => {
      const state = this.selectedState();
      if (state) {
        this.loadCities(state);
      }
    });
  }

  private async loadStates() {
    const states = await getStates();
    this.states.set(states);
    if (states.length > 0) {
      this.selectedState.set(states[0]);
    }
  }

  private async loadCities(state: string) {
    this.isPending.set(true);
    try {
      const cities = await getCities(state);
      this.cities.set(cities);
      if (cities.length > 0) {
        this.selectedCity.set(cities[0]);
      }
    } finally {
      this.isPending.set(false);
    }
  }

  onStateChange(event: Event) {
    const target = event.target as HTMLSelectElement;
    this.selectedState.set(target.value);
  }

  onCityChange(event: Event) {
    const target = event.target as HTMLSelectElement;
    this.selectedCity.set(target.value);
  }
}