Multiselect Dropdown In Angular

The Code Points August 27, 2022 0

In this article, we will learn how to add Multiselect Dropdown in Angular application without use of any UI framework like bootstrap, Angular material etc.

Typically, a list of data is presented to the user for selection in the Select drop-down HTML control. This is a time-tested and appealing method of giving users a small selection of data to choose from.

But what if we need to display hundreds of rows in dynamic data lists? Since it would make the website slower, we can't just feed all the data to UI DOMS.

Additionally, ng-select is recommended because it does not require additional dependencies like Bootstrap or Angular Material.

So, let's start withe the implementation,

First we need to create a new angular application using the following command in the terminal.

ng new ngmultiselect-dropdown-example

Now, we need to install the ng-multiselect-dropdown npm package using the following command.

npm install ng-multiselect-dropdown

Now, Import the NgSelectModule and FormsModule into the app.module.ts file to use the ng-select component in our application.

import { NgMultiSelectDropDownModule } from ‘ng-multiselect-dropdown’;

Finally, add a theme to our awesome ng-select component.

There are currently three available themes. Import one of the following elements into the style.css file:

@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";

Some Useful properties of ng-select

items: Selectable options can be filled from an array or object of local or remote content.

bindlabel: the property of an object that we want to label the pick box with.

placeholder: When nothing is chosen, the text is shown to the user.

searchable: It's used to turn on and off search functions.

appendTo: By default, the choices wrapper is added to the ng-select element, but additional elements may also be added by using this property.

multiple: We can choose a single or many selection in the select box by checking true or false.

maxSelectedItems: When multiple is set to true, we can restrict the amount of available items.

Now, add the following code under the app.module.ts file:

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, add the following code under the 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>

Now, add the following code under the 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);
  }
}

Now, run the application using the ng serve command and see the browser screen we are able to select multiple options from the dropdown.

Conclusion

In this article, we learned how to add Multiselect Dropdown in Angular application without use of any UI framework like bootstrap, Angular material etc.