Menú desplegable de selección múltiple angular

Muhammad Adil 20 marzo 2023
  1. Menú desplegable de selección múltiple en Angular
  2. Crear un menú desplegable de selección múltiple en Angular
Menú desplegable de selección múltiple 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.

  • Agregue la directiva ng-select a un elemento div.
  • Agregue la directiva ng-model para vincular el valor de una expresión a una variable.
  • Agregue el elemento de opción, una matriz de cadenas que representan una opción en la lista.
  • Agregue un elemento de entrada con tipo = "casilla de verificación" para cada opción en la lista y etiquete atributos para cada casilla de verificación correspondiente a su cadena asociada del paso 3 anterior, así como un atributo de valor que corresponda a su índice en el paso 3 (este será 0 a menos que utilice números).

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

Muhammad Adil avatar Muhammad Adil avatar

Muhammad Adil is a seasoned programmer and writer who has experience in various fields. He has been programming for over 5 years and have always loved the thrill of solving complex problems. He has skilled in PHP, Python, C++, Java, JavaScript, Ruby on Rails, AngularJS, ReactJS, HTML5 and CSS3. He enjoys putting his experience and knowledge into words.

Facebook

Artículo relacionado - Angular Dropdown