Comment obtenir une nouvelle valeur d'un select dans Angular 2 en 2025 : meilleures pratiques

Comment obtenir une nouvelle valeur d'un select dans Angular 2+ : du débutant au professionnel

Avez-vous déjà passé une soirée avec une tasse de café, à coder sur Angular, et soudain réalisé : "Zut, comment capturer le moment où l'utilisateur a choisi une nouvelle option dans <select> ?" ? Si oui, vous n'êtes pas seul. La question "How can I get new selection in 'select' in Angular 2?" sur Stack Overflow a recueilli des dizaines de milliers de vues. Et ce n'est pas surprenant : dans Angular, il existe trois façons de le faire, et les débutants se demandent souvent laquelle choisir.

Dans cet article, nous allons passer en revue toutes les approches actuelles en TypeScript qui fonctionnent dans Angular 2+ en 2025. Vous apprendrez à utiliser ngModel, les formulaires réactifs et le gestionnaire (change), et vous obtiendrez des recommandations claires sur quand et quoi utiliser. C'est parti !

Problème : pourquoi un simple select dans Angular n'est-il pas du simple HTML ?

En HTML classique, vous écririez :

<select id="city" onchange="handleChange(event)">\n  <option value="msk">Moscou</option>\n  <option value="spb">Saint-Pétersbourg</option>\n</select>

Et la fonction handleChange(event) recevrait l'événement. Dans Angular, c'est un peu plus complexe (mais aussi plus flexible). Vous n'avez pas seulement besoin de "capturer un clic", mais de lier correctement les données, de gérer le changement et d'éviter les erreurs typiques comme la perte de réactivité ou les re-rendus inutiles.

Examinons les trois principales méthodes que vous utiliserez en 2025.

Méthode 1 : Classique (ngModel + (change)) — simple et fiable

Cette approche convient aux formulaires simples où vous n'avez pas besoin de validation complexe. Vous liez le select à une variable via [(ngModel)] et écoutez l'événement (change).

Exemple de code

// 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[] = ['Moscou', 'Saint-Pétersbourg', 'Kazan'];\n\n  onCityChange(newCity: string): void {\n    console.log('Ville sélectionnée :', newCity);\n    // Ici, vous pouvez faire une requête API ou modifier d'autres parties de l'UI\n  }\n}

<!-- app.component.html -->\n<select [(ngModel)]="selectedCity" (change)="onCityChange(selectedCity)">\n  <option value="" disabled>Choisissez une ville</option>\n  <option *ngFor="let city of cities" [value]="city">{{ city }}</option>\n</select>

Important ! Dans Angular 2+, l'événement (change) se déclenche après que le modèle a été mis à jour. Donc selectedCity dans onCityChange contient déjà la nouvelle valeur. Si vous avez besoin de l'ancienne valeur, conservez-la dans une variable séparée avant le changement.

Méthode 2 : Formulaires réactifs — puissance et contrôle

Si vous construisez une application sérieuse avec validation, champs dynamiques ou abonnements — utilisez les formulaires réactifs. C'est la norme de l'industrie en 2025.

Étape 1 : Importez ReactiveFormsModule

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

Étape 2 : Créez un FormControl et abonnez-vous aux changements

// 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[] = ['Moscou', 'Saint-Pétersbourg', 'Kazan'];\n\n  ngOnInit(): void {\n    // Abonnement aux changements de valeur\n    this.cityControl.valueChanges.subscribe((newCity: string) => {\n      console.log('Nouvelle ville depuis le formulaire réactif :', newCity);\n      // Ici, vous pouvez faire une requête API ou mettre à jour d'autres parties de l'UI\n    });\n  }\n}