¿Cómo usar ngfor para hacer un menú desplegable en Angular desde una array?

En esta publicación, veremos cómo podemos mostrar los elementos de la array en el menú desplegable usando AngularJS. A veces necesitamos mostrar datos obtenidos dinámicamente y aquí es donde las funciones ngFor entran en escena. Podemos iterar sobre la array, aplicar condiciones y mostrar los datos fácilmente.

Uso de ngFor: NgFor es una directiva de plantilla integrada que facilita la iteración sobre algo como una array o un objeto y crea una plantilla para cada elemento. 

Sintaxis:

<tag-name  *ngFor="let item of array">{{iter}}</tag-name>
<tag-name  *ngFor="let key of object">{{key}}</tag-name>

Requisitos previos : NPM debe estar preinstalado.

Configuración del entorno:

• Instalar angular:

npm install -g @angular/cli

• Crear un nuevo proyecto Angular:

ng new <project-name>
cd <project-name> 

• Verifique la instalación ejecutando el proyecto. Debería ver la página de destino angular en http://localhost:4200/

ng serve -o

Creando menú desplegable:

1. Cree un nuevo componente:

ng g c dropdown

2. Creará un nuevo directorio con 4 archivos nuevos. Abra dropdown.component.ts y pegue el siguiente código:

desplegable.componente.ts:

import { Component } from '@angular/core';
  
@Component({
  selector: 'app-dropdown',
  templateUrl: './dropdown.component.html',
  styleUrls: ['./dropdown.component.css']
})
export class DropdownComponent {
  players = [
    "Sachin Tendulkar",
    "Ricky Ponting",
    "Virat Kohli",
    "Kumar Sangakkara",
    "Jacques Kallis",
    "Hashim Amla    ",
    "Mahela Jayawardene    ",
    "Brian Lara",
    "Rahul Dravid",
    "AB de Villiers"
  ]
  selected = "----"
  
  update(e){
    this.selected = e.target.value
  }
}

En el código anterior, hemos definido una array de jugadores que contiene los datos que mostraremos en el menú desplegable. Además, tenemos una variable seleccionada que usaremos para mostrar el elemento seleccionado. El método update() toma un evento y establece lo seleccionado en su valor.

3. Ahora agregue el siguiente código en dropdown.component.html:

desplegable.componente.html:

<h3>Choose Your Favorite Cricket Player</h3>
<select #cricket (change)="update($event)">
    <option value="default">----</option>
    <option *ngFor="let player of players" [value]="player">
        {{player}}
    </option>
</select>
  
<p>You selected {{selected}}</p>

Hemos creado un menú desplegable que usará la array de jugadores. Las opciones se completan con ngFor. La variable seleccionada se utiliza para mostrar la opción seleccionada.

4. Finalmente agregue este componente en app.component.html :

aplicación.componente.html:

<app-dropdown></app-dropdown>

5. Ahora ejecuta el proyecto y abre http://localhost:4200/ para ver los resultados:

ng serve -o

Producción