¿Cómo hacer un menú desplegable de selección múltiple usando Angular 11/10?

En este artículo, aprenderemos a construir el menú desplegable de selección múltiple en Angular. Para realizar esta tarea, requerimos Angular 10 o la versión Angular 11. menú desplegable, para esto, usaremos el paquete npm @ng-select/ng-select como un menú desplegable de selección múltiple. El paquete se utiliza para proporcionar un método establecido que brinda una opción para un menú desplegable y también proporciona los eventos de cambio para obtener el valor de la opción seleccionada. Para crear un menú desplegable de selección múltiple usando Angular, seguiremos los pasos a continuación en secuencia.

Sintaxis:

<ng-select
 [items]="item-name"
 bindLabel="name"
 placeholder="Select item"
 appendTo="body"
 [multiple]="true"
 [(ngModel)]="selected">
</ng-select>

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>

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

  ng serve -o

Estructura del proyecto: después de completar los pasos anteriores, la estructura de nuestro proyecto se verá como la siguiente imagen:

Creación de selección múltiple desplegable:

• ng new geeksforgeeks-multiSelect

• Instale el paquete @ngselect npm. Para usar el menú desplegable, seguiremos el siguiente comando para instalar el paquete @ngselect desde npm.

  npm install --save @ng-select/ng-select

Ejemplo: importe NgSelectModule y FormsModule dentro del archivo app.module.ts . Aquí, para usar ngSelect en la aplicación. necesitamos importar   NgSelectModule y FormsModule en el archivo app.module.ts .

import { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { BrowserModule } from "@angular/platform-browser";
import { NgSelectModule } from "@ng-select/ng-select";
  
import { AppComponent } from "./app.component";
  
@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, FormsModule, NgSelectModule],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

Importar archivo CSS: Necesitamos importar un CSS de NgSelectModule. Usaremos un default.theme.css que está en la carpeta ng-select/themes. Esto nos proporcionará un diseño desplegable de selección múltiple. Usaremos este archivo CSS de importación dentro de style.css. 

estilos.css

@import "~@ng-select/ng-select/themes/default.theme.css";

Declare un objeto que contendrá las listas de los autos, dentro del archivo app.component.ts. Aquí, actualizaremos el archivo app.component.ts . Este archivo se utiliza para almacenar la array de «autos» que contiene una lista de autos. Estamos almacenando todos los detalles del automóvil en objetos javascript y dentro de esos objetos. Estamos proporcionando identificación y nombres para todos los diferentes autos. También estamos tomando la array seleccionada en la que estamos seleccionando los elementos del menú que queremos seleccionar de forma predeterminada.

import { Component } from "@angular/core";
  
@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"],
})
export class AppComponent {
  title = "geeksforgeeks-multiSelect";
  
  cars = [
    { id: 1, name: "BMW Hyundai" },
    { id: 2, name: "Kia Tata" },
    { id: 3, name: "Volkswagen Ford" },
    { id: 4, name: "Renault Audi" },
    { id: 5, name: "Mercedes Benz Skoda" },
  ];
  
  selected = [{ id: 3, name: "Volkswagen Ford" }];
}

Renderizar el contenido: Aquí, actualizaremos nuestro diseño o veremos el archivo para renderizar nuestro contenido. Aquí, estamos usando el archivo app.component.html para actualizar o ver nuestro contenido de esta manera:

<h1>Multi-Select Dropdown using Angular 11/10</h1>
  
<!-- Using Items Input -->
<ng-select
  [items]="cars"
  bindLabel="name"
  placeholder="Select Category"
  appendTo="body"
  [multiple]="true"
  [(ngModel)]="selected">
</ng-select>

Ejecutar la aplicación: en este paso, estamos listos para ejecutar la aplicación. Una salida similar se puede ver como se muestra a continuación. 

ng serve

Producción: