NgMultiSelect with Multiple Selection and Search Filter In Angular

Introduction:

In this article, we’ll look at an outstanding Dropdown choose UI component that comes with a tonne of helpful features and is a wonderful fit for any Angular project.

In the Select drop-down HTML control, the user is usually provided a list of data for selection. This is a classic and attractive approach of presenting a restricted collection of data for choices.

But what if we have hundreds of rows to display in dynamic data lists? We can’t just feed all data to UI DOMS since it would slow down the website.

ng-select is also favored since it eliminates the requirement for additional dependencies such as Bootstrap or Angular Material.

Let’s see how soon we can use it!

Create New Angular Project

We will build a new Angular project with the Ng CLI tool by entering the following command in the terminal:

ng new ngmultiselect-dropdown

Install & Configure ng-select

1)Run the following command in terminal to install ng-select:

npm install ng-multiselect-dropdown

2) To use the ng-select component, import NgSelectModule and FormsModule into the app.module.ts file:

3) Theming

Finally, decorate our fantastic ng-select component with a theme.

We now have three themes to choose from. In the style.css file, import any of the following:

@import “~@ng-select/ng-select/themes/default.theme.css”;
@import “~@ng-select/ng-select/themes/material.theme.css”;
@import “~@ng-select/ng-select/themes/ant.design.theme.css”;

There are certain properties that are needed and some that are optional:

items:

Array or object of local or remote content to populate as select options.

bindlabel:

The attribute of an object that we wish to display as a select box label.

placeholder:

When nothing is selected, the user is presented with text.

searchable:

It is used to enable & disable search features.

appendTo:

The options wrapper is attached to the ng-select element by default, but this property may be used to add it to other elements.

multiple:

By selecting true or false we can choose single or multiple selection in select box.

maxSelectedItems:

we can limit number of item selection when multiple is set to true.

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { NgMultiSelectDropDownModule } from 'ng-multiselect-dropdown';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    NgMultiSelectDropDownModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

now let’s add code to app.component.html file.

<div class="container">
  <ng-multiselect-dropdown [placeholder]="'custom placeholder'" [settings]="dropdownSettings" [data]="dropdownList"
    [(ngModel)]="selectedItems" (onSelect)="onItemSelect($event)" (onSelectAll)="onSelectAll($event)">
  </ng-multiselect-dropdown>
</div>

app.component.ts file

import { Component } from '@angular/core';
import { IDropdownSettings } from 'ng-multiselect-dropdown';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'ng-multiselect';
  dropdownList: Array<any> = [];
  selectedItems: Array<any> = [];
  dropdownSettings!: IDropdownSettings;
  ngOnInit() {
    this.dropdownList = [
      { item_id: 1, item_text: 'Angular' },
      { item_id: 2, item_text: 'ReactJs' },
      { item_id: 3, item_text: 'MVC' },
      { item_id: 4, item_text: '.Net Core' },
      { item_id: 5, item_text: 'Vue' },
      { item_id: 6, item_text: 'NextJs' },
    ];
    this.selectedItems = [
      { item_id: 1, item_text: 'Angular' },
      { item_id: 4, item_text: '.Net Core' }
    ];
    this.dropdownSettings = {
      singleSelection: false,
      idField: 'item_id',
      textField: 'item_text',
      selectAllText: 'Select All',
      unSelectAllText: 'UnSelect All',
      itemsShowLimit: 3,
      allowSearchFilter: true
    };

  }
  onItemSelect(item: any) {
    console.log(item);
  }
  onSelectAll(items: any) {
    console.log(items);
  }
}

OUTPUT: