Angular Mehrfachauswahl-Dropdown

1. Mehrfachauswahl-Dropdown in Angular
2. Erstellen Sie ein Mehrfachauswahl-Dropdown in Angular

Das Dropdown-Menü ist eine allgegenwärtige Komponente auf jeder Website. Es wird zum Filtern der Artikelliste verwendet und kann für alles verwendet werden, von der Anzeige der Länderliste bis zum Filtern der Produktliste.

In diesem Artikel geht es um das Angular-Multi-Select-Dropdown und wie es in unserer Angular-Anwendung implementiert wird.

Mehrfachauswahl-Dropdown in Angular

Das Angular Multi-Select Dropdown ersetzt das HTML-Select-Tag zum Auswählen mehrerer Werte. Diese Textfeldkomponente ermöglicht es Benutzern, mehrere Werte aus einer vorgegebenen Liste von Möglichkeiten zu schreiben oder auszuwählen.

Zu den integrierten Funktionen gehören Datenbindung, Sortierung, Gruppierung, Kennzeichnung mit benutzerdefinierten Werten und Umschaltmodus.

Die Direktive ng-multi-select ist nützlich, wenn Sie mehrere Optionen aus einer Liste auswählen. Es ermöglicht uns, ein Dropdown-Menü mit mehreren Optionen zu erstellen, aus denen der Benutzer auswählen kann.

Die Direktive ng-select wird als Attribut für ein HTML-Element mit dem Wert eines Ausdrucks verwendet, der ein Array von Elementen zurückgibt. Die ausgewählten Elemente werden dann in der Dropdown-Liste angezeigt, und alle nicht ausgewählten Elemente werden ausgeblendet.

Dieses Paket enthält auch Änderungsereignisse zum Abrufen des ausgewählten Optionswerts, um das Dropdown-Menü mit Mehrfachauswahl in Angular zu aktivieren.

Erstellen Sie ein Mehrfachauswahl-Dropdown in Angular

In diesem Tutorial lernen Sie, mit ng-select ein Dropdown-Menü mit Mehrfachauswahl in Angular zu erstellen. Wir werden das Angular CLI verwenden, um unser Projekt zu generieren.

Öffnen Sie zunächst das Terminal und geben Sie den folgenden Befehl ein, um ein Projekt zu generieren.

ng new angular-multi-dropdown

Gehen Sie als Nächstes in den Projektordner und geben Sie den folgenden Befehl ein.

ng serve

Dieser Befehl startet einen Entwicklungsserver auf unserem Rechner. Öffnen Sie nun Ihren Browser und geben Sie "localhost:4200" in die Adressleiste ein.

Sie sollten eine Willkommensnachricht von unserer App sehen. Wenn Sie das nicht sehen, ist etwas mit dem Befehl ng serve schief gelaufen oder Sie müssen Ihren Computer/Browser neu starten.

Verwenden Sie danach die folgenden Schritte.

Unten ist ein Codebeispiel für das Angular-Dropdown-Menü mit Mehrfachauswahl.

Schreibmaschinencode:

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);
  }
}

HTML Quelltext:

<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>

Code ausführen