So erhalten Sie einen neuen Wert aus einem Select in Angular 2 im Jahr 2025: Best Practices

So erhalten Sie einen neuen Wert aus einem Select in Angular 2+: Vom Anfänger zum Profi

Haben Sie jemals abends mit einer Tasse Kaffee gesessen, Angular-Code geschrieben und plötzlich gedacht: "Verdammt, wie fange ich den Moment ein, in dem der Benutzer eine neue Option in <select> ausgewählt hat?"? Wenn ja, sind Sie nicht allein. Die Frage "How can I get new selection in 'select' in Angular 2?" hat auf Stack Overflow Zehntausende von Aufrufen gesammelt. Und das ist nicht verwunderlich: In Angular gibt es gleich drei Möglichkeiten, dies zu tun, und Anfänger sind oft verwirrt, welche sie wählen sollen.

In diesem Artikel werden wir alle aktuellen Ansätze in TypeScript durchgehen, die in Angular 2+ im Jahr 2025 funktionieren. Sie erfahren, wie Sie ngModel, reaktive Formulare und den (change)-Handler verwenden, und erhalten klare Empfehlungen, wann und was Sie anwenden sollten. Los geht's!

Das Problem: Warum ist ein einfaches Select in Angular nicht einfach nur HTML?

In normalem HTML würden Sie schreiben:

<select id="city" onchange="handleChange(event)">\n  <option value="msk">Moskau</option>\n  <option value="spb">Sankt Petersburg</option>\n</select>

Und die Funktion handleChange(event) würde das Ereignis empfangen. In Angular ist alles etwas komplexer (aber auch flexibler). Sie müssen nicht nur einen "Klick abfangen", sondern die Daten korrekt verknüpfen, die Änderung verarbeiten und typische Fehler wie Reaktivitätsverlust oder unnötige Neu-Renderings vermeiden.

Lassen Sie uns die drei wichtigsten Methoden betrachten, die Sie im Jahr 2025 verwenden werden.

Methode 1: Der Klassiker (ngModel + (change)) – einfach und zuverlässig

Dieser Ansatz eignet sich für einfache Formulare, bei denen Sie keine komplexe Validierung benötigen. Sie binden das select über [(ngModel)] an eine Variable und hören auf das (change)-Ereignis.

Codebeispiel

// app.component.ts\nimport { Component } from '@angular/core';\n\n@Component({\n  selector: 'app-root',\n  templateUrl: './app.component.html'\n})\nexport class AppComponent {\n  selectedCity: string = '';\n  cities: string[] = ['Moskau', 'Sankt Petersburg', 'Kasan'];\n\n  onCityChange(newCity: string): void {\n    console.log('Ausgewählte Stadt:', newCity);\n    // Hier können Sie einen API-Aufruf tätigen oder andere UI-Teile ändern\n  }\n}

<!-- app.component.html -->\n<select [(ngModel)]="selectedCity" (change)="onCityChange(selectedCity)">\n  <option value="" disabled>Wählen Sie eine Stadt</option>\n  <option *ngFor="let city of cities" [value]="city">{{ city }}</option>\n</select>

Wichtig! In Angular 2+ wird das (change)-Ereignis nach der Aktualisierung des Modells ausgelöst. Daher enthält selectedCity innerhalb von onCityChange bereits den neuen Wert. Wenn Sie den alten Wert benötigen, speichern Sie ihn vor der Änderung in einer separaten Variable.

Methode 2: Reaktive Formulare – Leistung und Kontrolle

Wenn Sie eine ernsthafte Anwendung mit Validierung, dynamischen Feldern oder Abonnements erstellen, verwenden Sie reaktive Formulare. Dies ist der Industriestandard im Jahr 2025.

Schritt 1: Importieren Sie ReactiveFormsModule

// app.module.ts\nimport { ReactiveFormsModule } from '@angular/forms';\n\n@NgModule({\n  imports: [\n    ReactiveFormsModule\n  ]\n})\nexport class AppModule { }

Schritt 2: Erstellen Sie einen FormControl und abonnieren Sie Änderungen

// app.component.ts\nimport { Component, OnInit } from '@angular/core';\nimport { FormControl } from '@angular/forms';\n\n@Component({\n  selector: 'app-root',\n  templateUrl: './app.component.html'\n})\nexport class AppComponent implements OnInit {\n  cityControl = new FormControl('');\n  cities: string[] = ['Moskau', 'Sankt Petersburg', 'Kasan'];\n\n  ngOnInit(): void {\n    // Abonnieren von Wertänderungen\n    this.cityControl.valueChanges.subscribe((newCity: string) => {\n      console.log('Neue Stadt aus reaktivem F