Tutorials

Tutorial: Kaskadierende Dropdown-Listen in Angular (Abhängige Dropdowns)

Melden

Hier ist ein ausführliches Tutorial zur Erstellung einer kaskadierenden (abhängigen) Dropdown-Liste in Angular.

In diesem Tutorial lernst du, wie du zwei oder mehr Dropdown-Menüs so miteinander verknüpfst, dass die Auswahl im ersten Menü die Optionen im zweiten Menü filtert (z. B. Land -> Bundesland).

Voraussetzungen

  • Grundkenntnisse in Angular, HTML und TypeScript.
  • Installierte Angular CLI.

Schritt 1: Ein neues Projekt erstellen

Falls du noch kein Projekt hast, erstelle ein neues:

ng new cascading-dropdown
cd cascading-dropdown

Schritt 2: Die Datenstruktur definieren

Zuerst benötigen wir Beispieldaten. Wir erstellen eine einfache Struktur für Länder und die dazugehörigen Bundesländer.

Öffne die Datei app.component.ts und definiere zwei Interfaces sowie die Daten:

// app.component.ts
import { Component } from '@angular/core';

interface Country {
  id: number;
  name: string;
}

interface State {
  id: number;
  countryId: number;
  name: string;
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  // Hauptlisten
  countries: Country[] = [
    { id: 1, name: 'Deutschland' },
    { id: 2, name: 'Österreich' },
    { id: 3, name: 'Schweiz' }
  ];

  allStates: State[] = [
    { id: 1, countryId: 1, name: 'Berlin' },
    { id: 2, countryId: 1, name: 'Bayern' },
    { id: 3, countryId: 2, name: 'Wien' },
    { id: 4, countryId: 2, name: 'Salzburg' },
    { id: 5, countryId: 3, name: 'Zürich' },
    { id: 6, countryId: 3, name: 'Bern' }
  ];

  // Diese Liste wird gefiltert angezeigt
  filteredStates: State[] = [];

  // Logik für die Auswahl
  onCountryChange(event: any) {
    const countryId = Number(event.target.value);
    if (countryId) {
      this.filteredStates = this.allStates.filter(s => s.countryId === countryId);
    } else {
      this.filteredStates = [];
    }
  }
}

Schritt 3: Das HTML-Template erstellen

Nun binden wir die Daten in der Datei app.component.html ein. Wir nutzen das (change)-Event, um auf die Auswahl des Benutzers zu reagieren.

<div style="padding: 50px;">
  <h1>Kaskadierende Dropdown-Liste</h1>

  <!-- Erstes Dropdown: Länder -->
  <div>
    <label for="country">Land auswählen:</label>
    <select id="country" (change)="onCountryChange($event)" style="display: block; margin-bottom: 20px; width: 200px;">
      <option value="">-- Land wählen --</option>
      <option *ngFor="let country of countries" [value]="country.id">
        {{ country.name }}
      </option>
    </select>
  </div>

  <!-- Zweites Dropdown: Bundesländer (Abhängig vom ersten) -->
  <div>
    <label for="state">Bundesland auswählen:</label>
    <select id="state" [disabled]="filteredStates.length === 0" style="display: block; width: 200px;">
      <option value="">-- Erst Land wählen --</option>
      <option *ngFor="let state of filteredStates" [value]="state.id">
        {{ state.name }}
      </option>
    </select>
  </div>
</div>

Schritt 4: Erklärung der Logik

  1. Datenmodelle: Wir haben Country und State. Wichtig ist das Feld countryId in den Bundesländern, da dies die Verknüpfung zum Land herstellt.
  2. onCountryChange: Diese Funktion wird jedes Mal aufgerufen, wenn der Nutzer im ersten Dropdown ein Land auswählt. Wir nehmen die ID des ausgewählten Landes und filtern das Array allStates.
  3. Property Binding [disabled]: Das zweite Dropdown bleibt deaktiviert, solange kein Land ausgewählt wurde (filteredStates.length === 0).
  4. *`ngFor`:** Diese Direktive sorgt dafür, dass die Optionen dynamisch aus unseren Arrays generiert werden.

Schritt 5: Anwendung testen

Starte deinen lokalen Server:

ng serve

Öffne http://localhost:4200 in deinem Browser. Wenn du "Deutschland" wählst, sollten im zweiten Dropdown "Berlin" und "Bayern" erscheinen. Wechselst du auf "Österreich", aktualisiert sich die Liste automatisch auf "Wien" und "Salzburg".

Tipps für Fortgeschrittene:

  • Reactive Forms: Für größere Projekte empfiehlt es sich, ReactiveFormsModule zu nutzen, um die Formularwerte sauberer zu verwalten.
  • API-Anbindung: In einer realen Anwendung würdest du die Daten vermutlich über einen HttpClient von einem Backend laden, anstatt sie hart im Code zu definieren.
  • Reset: Vergiss nicht, das zweite Dropdown zurückzusetzen, wenn das erste Land erneut geändert wird (das passiert in diesem Beispiel bereits durch das Filtern des Arrays).
0