Obtener el valor seleccionado de un Dropdown en Angular

En el desarrollo de aplicaciones web con Angular, los dropdowns o menús desplegables son elementos fundamentales para permitir a los usuarios seleccionar opciones de una lista. Una tarea común es acceder al valor que el usuario ha elegido dentro de este dropdown para poder utilizarlo en la lógica de nuestra aplicación. En este artículo, exploraremos tres métodos claros y concisos para lograr precisamente esto, utilizando las funcionalidades que Angular nos proporciona.

Tres métodos efectivos para acceder al valor seleccionado

A continuación, analizaremos en detalle tres enfoques distintos para obtener el valor seleccionado de un dropdown en Angular. Cada método tiene sus propias ventajas y se adapta mejor a diferentes escenarios de desarrollo. Los métodos que cubriremos son:

• Utilizando el evento change del dropdown.
• Utilizando ViewChild para acceder al elemento del DOM.
• Utilizando ngModel para el data binding bidireccional.

1. Utilizando el evento change y variables de referencia de plantilla

Este primer método se basa en la captura del evento change que se dispara en un elemento <select> cuando el usuario selecciona una nueva opción. Para acceder al valor, utilizaremos variables de referencia de plantilla, una característica muy útil en Angular.

Veamos un ejemplo práctico. Imaginemos que tenemos un dropdown que permite seleccionar un equipo de baloncesto:

 <div class="col"> <p>Equipo seleccionado: {{ selectedTeam }} usando evento change</p> <select #equipos (change)="onSelected(equipos.value)"> <option value="">Selecciona un equipo</option> <option value="Lakers">Los Angeles Lakers</option> <option value="Miami">Miami Heat</option> <option value="Cleveland">Cleveland Cavaliers</option> </select> </div> 

En este código HTML:

• #equipos define una variable de referencia de plantilla llamada equipos que apunta al elemento <select>.
• (change)="onSelected(equipos.value)" escucha el evento change del dropdown y llama a la función onSelected(), pasándole como argumento equipos.value. equipos.value nos da acceso al valor seleccionado en el dropdown.

Ahora, en nuestro componente de Angular (archivo Typescript), definiremos la función onSelected():

 import { Component } from '@angular/core'; @Component({ selector: 'app-team-with-change-event', templateUrl: './team-with-change-event.component.html', styleUrls: ['./team-with-change-event.component.css'], }) export class TeamWithChangeEventComponent { selectedTeam = ''; onSelected(value: string): void { this.selectedTeam = value; } } 

En el componente:

• Declaramos una variable selectedTeam de tipo string, donde almacenaremos el equipo seleccionado.
• La función onSelected(value: string) recibe el valor seleccionado del dropdown como argumento (value) y lo asigna a la variable this.selectedTeam.

¿Cómo funciona? Angular utiliza el enlace de eventos (event binding) para conectar el evento change del dropdown con la función onSelected(). Gracias a la variable de referencia de plantilla #equipos, podemos acceder a las propiedades del elemento HTML <select>, incluyendo su propiedad value, que contiene el valor de la opción seleccionada.

2. Utilizando ViewChild y variables de referencia de plantilla

El segundo método utiliza el decorador @ViewChild para acceder al elemento <select> directamente desde el componente. También emplearemos variables de referencia de plantilla, pero de una manera ligeramente diferente.

El HTML para este método es muy similar al anterior:

 <div class="col"> <p>Equipo seleccionado: {{ selectedTeam }} usando ViewChild</p> <select #equipos (change)="onSelected()"> <option value="">Selecciona un equipo</option> <option value="Lakers">Los Angeles Lakers</option> <option value="Miami">Miami Heat</option> <option value="Cleveland">Cleveland Cavaliers</option> </select> </div> 

La principal diferencia en el HTML es que ahora la función onSelected() se llama sin pasarle explícitamente el valor como argumento: (change)="onSelected()".

El componente Typescript cambia de la siguiente manera:

 import { Component, ElementRef, ViewChild } from '@angular/core'; @Component({ selector: 'app-team-using-view-child', templateUrl: './team-using-view-child.component.html', styleUrls: ['./team-using-view-child.component.css'], }) export class TeamUsingViewChildComponent { @ViewChild('equipos') equipos!: ElementRef; selectedTeam = ''; onSelected(): void { this.selectedTeam = this.equipos.nativeElement.value; } } 

En el componente:

• Importamos ElementRef y ViewChild desde @angular/core.
• @ViewChild('equipos') equipos!: ElementRef; utiliza el decorador @ViewChild para obtener una referencia al elemento HTML que tiene la variable de referencia de plantilla #equipos (definida en el HTML). ElementRef es un contenedor para el elemento DOM nativo.
• En la función onSelected(), accedemos al valor seleccionado utilizando this.equipos.nativeElement.value. nativeElement nos da acceso al elemento DOM nativo, y luego accedemos a su propiedad value.

¿Cómo funciona? El decorador @ViewChild nos permite acceder a elementos del DOM directamente desde nuestro componente de Angular. ElementRef actúa como una envoltura alrededor del elemento DOM, y a través de nativeElement podemos interactuar con él como lo haríamos en Javascript puro. De esta forma, podemos obtener el valor del dropdown directamente desde el componente.

3. Utilizando la directiva NgModel

El tercer y, a menudo, más sencillo método para obtener el valor seleccionado de un dropdown en Angular es utilizando la directiva ngModel. NgModel proporciona un mecanismo de data binding bidireccional, lo que simplifica enormemente la sincronización entre la vista (template) y el modelo (componente).

Para utilizar ngModel, primero debemos importar el módulo FormsModule en nuestro módulo principal de Angular (app.module.ts):

 import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; // <-- Importar FormsModule import { AppComponent } from './app.component'; import { TeamWithNgmodelComponent } from './team-with-ngModel.component'; @NgModule({ declarations: [ AppComponent, TeamWithNgmodelComponent ], imports: [ BrowserModule, FormsModule // <-- Añadir FormsModule a imports ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } 

Una vez importado FormsModule, podemos utilizar ngModel en nuestro template HTML:

 <div class="col"> <p>Equipo seleccionado: {{ selectedTeam }} usando ngModel</p> <select [(ngModel)]="selectedTeam"> <option value="">Selecciona un equipo</option> <option value="Lakers">Los Angeles Lakers</option> <option value="Miami">Miami Heat</option> <option value="Cleveland">Cleveland Cavaliers</option> </select> </div> 

En este caso, simplemente añadimos [(ngModel)]="selectedTeam" al elemento <select>. El componente Typescript se simplifica aún más:

 import { Component } from '@angular/core'; @Component({ selector: 'app-team-with-ngModel', templateUrl: './team-with-ngModel.component.html', styleUrls: ['./team-with-ngModel.component.css'], }) export class TeamWithNgmodelComponent { selectedTeam = ''; } 

¡Observa que ya no necesitamos la función onSelected()! La directiva ngModel se encarga de actualizar automáticamente la variable selectedTeam en nuestro componente cada vez que el usuario selecciona una opción en el dropdown.

¿Cómo funciona?NgModel utiliza el concepto de ControlValueAccessor. Angular proporciona implementaciones de ControlValueAccessor para los elementos de formulario HTML estándar como <input>, <select> y <checkbox>. NgModel establece un enlace bidireccional entre el dropdown y la variable selectedTeam. Cuando el valor del dropdown cambia, ngModel actualiza automáticamente selectedTeam, y viceversa (aunque en este caso solo estamos interesados en la dirección del dropdown al componente).

Tabla comparativa de los métodos

Preguntas frecuentes (FAQ)

¿Cuál es el método más recomendado?

Generalmente, el método utilizando ngModel es el más recomendado por su simplicidad y claridad. Facilita el manejo de formularios y el data binding en Angular.

¿Cuándo debería usar ViewChild en lugar de ngModel?

ViewChild es útil cuando necesitas interactuar directamente con el elemento DOM, por ejemplo, para acceder a sus propiedades, métodos o manipular su estilo. Para simplemente obtener el valor seleccionado, ngModel suele ser más adecuado.

¿Es necesario importar FormsModule para todos los métodos?

No, solo es necesario importar FormsModule si utilizas el método con ngModel. Los otros dos métodos (evento change y ViewChild) no requieren FormsModule.

¿Puedo usar estos métodos con dropdowns de Angular Material (<mat-select>)?

Sí, estos métodos son aplicables tanto a los elementos <select> HTML estándar como a los componentes de dropdown de Angular Material (<mat-select>). Angular Material está construido sobre HTML estándar y extiende su funcionalidad. De hecho, <mat-select> también emite el evento change y funciona perfectamente con ngModel y ViewChild.

Conclusión

Obtener el valor seleccionado de un dropdown en Angular es una tarea común y esencial en el desarrollo web. Hemos explorado tres métodos diferentes: utilizando el evento change, ViewChild y ngModel. Cada uno tiene sus ventajas y desventajas, pero ngModel se destaca por su simplicidad y eficiencia en la mayoría de los escenarios. Elegir el método adecuado dependerá de las necesidades específicas de tu aplicación y la complejidad de la interacción que requieras con el dropdown.

Esperamos que este artículo te haya proporcionado una comprensión clara y práctica de cómo obtener el valor seleccionado de un dropdown en Angular. ¡Ahora puedes aplicar estos conocimientos en tus proyectos y construir interfaces de usuario más interactivas y dinámicas!