Menú desplegable de selección múltiple angular

1. Menú desplegable de selección múltiple en Angular
2. Crear un menú desplegable de selección múltiple en Angular

El menú desplegable es un componente omnipresente en cualquier sitio web. Se usa para filtrar la lista de elementos y se puede usar para cualquier cosa, desde mostrar la lista de países hasta filtrar la lista de productos.

Este artículo trata sobre el menú desplegable de selección múltiple de Angular y cómo implementarlo en nuestra aplicación Angular.

Menú desplegable de selección múltiple en Angular

El menú desplegable de selección múltiple angular reemplaza la etiqueta de selección HTML para elegir varios valores. Este componente de cuadro de texto permite a los usuarios escribir o seleccionar múltiples valores de una lista predeterminada de posibilidades.

Sus capacidades integradas incluyen vinculación de datos, clasificación, agrupación, etiquetado con valores personalizados y modo de alternancia.

La directiva ng-multi-select es útil cuando se seleccionan múltiples opciones de una lista. Nos permite crear un menú desplegable con múltiples opciones entre las que el usuario puede seleccionar.

La directiva ng-select se usa como un atributo en un elemento HTML con el valor de una expresión que devuelve una matriz de elementos. Los elementos seleccionados se muestran en la lista desplegable y los elementos que no están seleccionados se ocultan.

Este paquete también incluye eventos de cambio para obtener el valor de la opción seleccionada para habilitar el menú desplegable de selección múltiple en Angular.

Crear un menú desplegable de selección múltiple en Angular

Este tutorial le enseñará a crear un menú desplegable de selección múltiple en Angular con ng-select. Usaremos el Angular CLI para generar nuestro proyecto.

Primero, abra la terminal y escriba el siguiente comando para generar un proyecto.

ng new angular-multi-dropdown

Luego, ingrese a la carpeta del proyecto y escriba el comando a continuación.

ng serve

Este comando iniciará un servidor de desarrollo en nuestra máquina. Ahora, abra su navegador y escriba "localhost:4200" en la barra de direcciones.

Debería ver un mensaje de bienvenida de nuestra aplicación. Si no ve eso, algo salió mal con el comando ng serve, o necesita reiniciar su computadora/navegador.

Después de eso, use los siguientes pasos.

A continuación se muestra un ejemplo de código del menú desplegable de selección múltiple de Angular.

Código mecanografiado:

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
dropdownList: { id: number; itemName: string; }[];
selectedItems: { id: number; itemName: string; }[];
dropdownSettings: { singleSelection: boolean; text: string; selectAllText: string; unSelectAllText: string; enableSearchFilter: boolean; classes: string; };
  ngOnInit() {
    this.dropdownList = [
      { id: 1, itemName: 'Netherlands' },
      { id: 2, itemName: 'Pakistan' },
      { id: 3, itemName: 'Australia' },
      { id: 4, itemName: 'USA' },
      { id: 5, itemName: 'Canada' },
    ];
    this.selectedItems = [
      { id: 2, itemName: 'Pakistan' },
    ];
    this.dropdownSettings = {
      singleSelection: false,
      text: 'Select Countries',
      selectAllText: 'Select All',
      unSelectAllText: 'UnSelect All',
      enableSearchFilter: true,
      classes: 'myclass custom-class'
    };
  }
  onItemSelect(item: any) {
    console.log(item);
    console.log(this.selectedItems);
  }
  OnItemDeSelect(item: any) {
    console.log(item);
    console.log(this.selectedItems);
  }
  onSelectAll(items: any) {
    console.log(items);
  }
  onDeSelectAll(items: any) {
    console.log(items);
  }
}

Código HTML:

<h2>Example of Angular Multi Select Dropdown</h2>
<angular2-multiselect [data]="dropdownList" [(ngModel)]="selectedItems"
    [settings]="dropdownSettings"
    (onSelect)="onItemSelect($event)"
    (onDeSelect)="OnItemDeSelect($event)"
    (onSelectAll)="onSelectAll($event)"
    (onDeSelectAll)="onDeSelectAll($event)">
</angular2-multiselect>

Ejecutar código