El angular select es un tipo de menú desplegable que les permite a los usuarios seleccionar una o varias opciones dentro de una lista predefinida. Es una funcionalidad muy importante en el desarrollo web y por eso hoy queremos explicarte cómo hacer uso del angular select y mostrarte algunos ejemplos.
¿Qué es angular select?
El angular select es una opción de formulario que le permite a los usuarios hacer una selección de una determinada lista de opciones. Angular nos provee de varias formas de manejar un select, tanto si es con datos simples como si es con datos complejos.
Angular es simple y fácil de usar. Permite, no solo crear un menú desplegable con datos simples, sino también manejar listas de objetos, seleccionar múltiples opciones y personalizar el comportamiento del control para casos más avanzados.
Creación de un select básico en Angular
Para entender mejor, vamos a crear un angular select que utilice una lista simple de valores. El primer paso es crear un componente de Angular que defina una lista de opciones que queremos mostrar:
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-c1',
templateUrl: './c1.component.html',
styleUrls: ['./c1.component.less']
})
export class C1Component implements OnInit {
lista: string[] = ["Hola", "Qué", "Tal", "Estás"];
seleccionado: string;
constructor() {}
ngOnInit() {}
}Para este ejemplo hemos creado un componente que contiene una lista de cadenas de texto. Para mostrar esta lista como un angular select, añadimos un bloque de código HTML que maneje este select:
<p>
<select name="miselect" [(ngModel)]="seleccionado">
<option [value]="item" *ngFor="let item of lista">{{item}}</option>
</select>
</p>
<p>Seleccionado: {{seleccionado}}</p>En este fragmento de código utilizamos la directiva *ngFor para generar las opciones del select con base en la lista definida en el componente. Sumado a est, usamos [(ngModel)] para hacer un binding bidireccional, esto hace que el valor seleccionado esté sincronizado con la variable seleccionado.
Angular select múltiple
En algunos casos va a ser necesario que permitas que los usuarios selecciones más de una opción a la vez. PAra hacerlo debemos agregar la propiedad multiple al angular select, así:
<p>
<select name="miselect" [(ngModel)]="seleccionados" multiple>
<option [value]="item" *ngFor="let item of lista">{{item}}</option>
</select>
</p>
<ul>
<li *ngFor="let item of seleccionados">{{item}}</li>
</ul>Este ejemplo nos permitirá seleccionar múltiples opciones y los elementos seleccionados se almacenan en un array llamado seleccionados. Al seleccionarlos, se mostrarán en una lista debajo del select.
Angular select con objetos complejos
En la mayoría de los casos de uso real no trabajarás con simples cadenas de texto, sino con objetos más complejos. Veamos cómo manejar listas de objetos en un angular select: Primero, definimos una clase para el objeto:
export class Ciudad {
constructor(public id: string, public nombre: string, public descripcion: string) {}
}Luego, creamos el componente con una lista de objetos:
import { Component, OnInit } from '@angular/core';
import { Ciudad } from './ciudad';
@Component({
selector: 'app-c2',
templateUrl: './c2.component.html',
styleUrls: ['./c2.component.less']
})
export class C2Component implements OnInit {
lista: Ciudad[] = [
new Ciudad("1", "Santander", "Ciudad al lado del mar"),
new Ciudad("2", "Donosti", "Ciudad gastronómica"),
new Ciudad("3", "Bilbao", "Ciudad cultural")
];
seleccionado: Ciudad;
constructor() {}
ngOnInit() {}
}Y aquí el código HTML para nuestro angular select:
<p>
<select name="miselect" [(ngModel)]="seleccionado">
<option [ngValue]="objeto" *ngFor="let objeto of lista">{{objeto.nombre}}</option>
</select>
</p>
<p>Ciudad seleccionada:</p>
<p>{{seleccionado?.nombre}} - {{seleccionado?.descripcion}}</p>Al seleccionar una ciudad del desplegable, puedes acceder a las propiedades del objeto completo, no solo a una cadena. Esta es una de las cosas más interesatnes del angular select, que puedes trabajar directamente con objetos complejos sin necesidad de mapearlos manualmente.
Comparación personalizada con compareWith
Existen casos en los que es posible que necesites personalizar cómo se comparan los objetos en un select. Angular provee la opción compareWith, que permite comparar objetos más allá de su referencia directa. Su implementación se da del siguiente modo:
<p>
<select name="miselect" [(ngModel)]="seleccionado" [compareWith]="compararNombres">
<option [ngValue]="ciudad" *ngFor="let ciudad of lista">{{ciudad.nombre}}</option>
</select>
</p>
<p>{{seleccionado?.nombre}}</p>En este caso se define una función en el componente para comparar dos objetos por sus nombres:
compararNombres(ciudad1: Ciudad, ciudad2: Ciudad): boolean {
return ciudad1 && ciudad2 ? ciudad1.nombre === ciudad2.nombre : ciudad1 === ciudad2;
}Esto permite a Angular saber cuándo dos objetos son “iguales” solamente basándose en sus nombres, en lugar de comparar sus referencias en memoria.
Si te atrae el campo de la tecnología y áreas como la programación, en Keepcoding tenemos a tu disposición el bootcamp desarrollo web, un curso intensivo que te enseñará cómo diseñar y crear páginas web desde cero, así como los distintos componentes que son necesarios. ¡Crea tu primer sitio web y transforma tu vida laboral! ¡Únete ahora!
