Cómo obtener un nuevo valor de un select en Angular 2 en 2025: mejores prácticas

Cómo obtener un nuevo valor de un select en Angular 2+: de principiante a profesional

¿Alguna vez te has sentado por la noche con una taza de café, escribiendo código en Angular y de repente te has dado cuenta: "¡Rayos! ¿Cómo capturo el momento en que el usuario selecciona una nueva opción en <select>?"? Si es así, no estás solo. La pregunta "How can I get new selection in 'select' in Angular 2?" en Stack Overflow ha acumulado decenas de miles de visitas. Y no es de extrañar: en Angular hay tres formas de hacerlo, y los principiantes a menudo se confunden sobre cuál elegir.

En este artículo, analizaremos todos los enfoques actuales en TypeScript que funcionan en Angular 2+ en 2025. Aprenderás a usar ngModel, formularios reactivos y el manejador (change), y obtendrás recomendaciones claras sobre cuándo y qué usar. ¡Allá vamos!

El problema: ¿por qué un simple select en Angular no es solo HTML?

En HTML normal, escribirías:

<select id="city" onchange="handleChange(event)">\n  <option value="msk">Moscú</option>\n  <option value="spb">San Petersburgo</option>\n</select>

Y la función handleChange(event) recibiría el evento. En Angular es un poco más complejo (pero también más flexible). No solo necesitas "capturar el clic", sino vincular correctamente los datos, manejar el cambio y evitar errores típicos como la pérdida de reactividad o renderizados innecesarios.

Veamos las tres formas principales que usarás en 2025.

Forma 1: Clásica (ngModel + (change)) — simple y confiable

Este enfoque es adecuado para formularios simples donde no necesitas validación compleja. Vinculas el select con una variable mediante [(ngModel)] y escuchas el evento (change).

Ejemplo de código

// 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[] = ['Moscú', 'San Petersburgo', 'Kazán'];\n\n  onCityChange(newCity: string): void {\n    console.log('Ciudad seleccionada:', newCity);\n    // Aquí puedes hacer una solicitud a la API o cambiar otras partes de la UI\n  }\n}

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

¡Importante! En Angular 2+, el evento (change) se dispara después de que el modelo se haya actualizado. Por lo tanto, selectedCity dentro de onCityChange ya contiene el nuevo valor. Si necesitas el valor anterior, guárdalo en una variable separada antes del cambio.

Forma 2: Formularios reactivos — potencia y control

Si estás construyendo una aplicación seria con validación, campos dinámicos o suscripciones, usa formularios reactivos. Es el estándar de la industria en 2025.

Paso 1: Importa ReactiveFormsModule

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

Paso 2: Crea un FormControl y suscríbete a los cambios

// 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[] = ['Moscú', 'San Petersburgo', 'Kazán'];\n\n  ngOnInit(): void {\n    // Nos suscribimos a los cambios de valor\n    this.cityControl.valueChanges.subscribe((newCity: string) => {\n      console.log('Nueva ciudad desde formulario reactivo');