Opción seleccionada en el menú desplegable angular

Presentaremos cómo configurar una opción seleccionada en un menú desplegable de Angular, configurar una opción seleccionada de un array de opciones y configurar una opción seleccionada si las opciones son dinámicas en Angular.

Establecer la opción seleccionada en el menú desplegable angular

Este artículo discutirá la configuración de una opción seleccionada para el menú desplegable Angular. Al crear un menú desplegable con múltiples opciones, ninguna opción se selecciona automáticamente.

Entonces, primero crearemos un menú desplegable y estableceremos una opción seleccionada, y discutiremos diferentes escenarios sobre la mejor manera de establecer una opción seleccionada cuando las opciones son estáticas o dinámicas o cuando tenemos una variedad de opciones.

En el app.component.html, crearemos un formulario de selección.

# angular
<select [(ngModel)]='ngDropdown' name="dropdownOption" id="dropdownOption" class='form-control'>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>

Como se ve en este código, usamos [(ngModel)], que crea una instancia de FormControl y la vincula a un elemento de control de formulario.

Agregaremos algo de CSS en app.component.css para mejorar nuestro formulario desplegable.

# angular
.form-control{
  padding: 5px 10px;
  background-color: rgb(52, 119, 179);
  color: white;
  border-color: black;
  width: 100px;
  height: 30px;
}
option:hover{
  background-color: white;
  color: rgb(52, 119, 179);
}

Producción:

Vemos que no hay ninguna opción seleccionada, pero aparecen todas las opciones al pulsar sobre ella.

Para establecer una opción como seleccionada, podemos asignar el valor a la variable ngDropdown en el app.component.ts. Mirando nuestro código de app.component.html, veremos que ya asignamos la variable [(ngModel)]='ngDropdown'.

Intentemos establecer 1 como valor predeterminado.

# angular
import { Component, VERSION } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  ngDropdown = 1;
}

Luego de asignar la opción seleccionada, notamos que el desplegable muestra 1 como opción seleccionada. De esa manera, podemos seleccionar cualquier opción como una opción seleccionada en Angular.

Producción:

Establecer la opción seleccionada de un array de opciones

Discutiremos cómo establecer un valor predeterminado a partir de una serie de opciones.

En primer lugar crearemos dos variables: ngDropdown, la opción por defecto de nuestro desplegable, y la segunda será ngOptions que tendrá todas las opciones que queremos mostrar en las opciones del desplegable.

Entonces, agreguemos este código en app.component.ts.

# angular
import { Component, VERSION } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  ngOptions = [1,2,3,4,5,6,7,8,9,10]
  ngDropdown = 1;
}

En el array ngOptions, establecemos valores de 1 a 10; en ngDropdown, establecemos 1 como valor predeterminado.

Crearemos un formulario de selección en el app.component.html.

# angular
<select class="form-control" id="DropdownOptions">
  <option
    *ngFor="let opt of ngOptions"
    [selected]="opt === ngDropdown"
    [value]="opt"
  >
    {{ opt }}
  </option>
</select>

En este código, veremos que configuramos [selected] en ngDropdown, por lo que se seleccionará automáticamente cuando alguna opción sea igual a ngDropdown.

Producción:

Opción seleccionada de valores dinámicos

Discutiremos la configuración de una opción seleccionada si tenemos valores dinámicos para las opciones. Primero, crearemos dos variables; uno será ngDropdown, la opción predeterminada para nuestro formulario de selección, y el segundo será ngOptions que tendrá todos los valores que queremos mostrar en las opciones desplegables.

Sabemos que habrá valores dinámicos, así que tengamos un array de números aleatorios y configuremos la opción seleccionada para el segundo elemento de esa matriz.

# angular
import { Component, VERSION } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  ngOptions = [3,6,1,4,2,10,7,5,9,8]
  ngDropdown = this.ngOptions[1];
}

El app.component.html tendrá el siguiente código.

# angular
<select class="form-control" id="DropdownOptions">
  <option
    *ngFor="let opt of ngOptions"
    [selected]="opt === ngDropdown"
    [value]="opt"
  >
    {{ opt }}
  </option>
</select>

Producción:

Entonces, podemos ver que el segundo elemento de esa matriz se establece como una opción seleccionada. Podemos cambiar esto cambiando el índice de un array.

Este tutorial nos enseñó cómo configurar la opción seleccionada para el menú desplegable Angular. También discutimos tres escenarios diferentes de selección de opciones cuando los valores son estáticos, dinámicos o un array.