How to implement angular-dual-listbox in Angular Project

In this post we are going to see on how to implement multi select using a node module called angular-dual-listbox. you can find the link to the node module here.


First of all install the angular-dual-listbox node module into your Angular project using the following command given below.

npm i angular-dual-listbox --save

for the angular-dual-listbox to work in your project import it to your root module as shown below.

import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AngularDualListBoxModule } from 'angular-dual-listbox'; .... @NgModule({ imports: [ AngularDualListBoxModule ], ... }) export class AppModule {}

Next, For the code to work you does not need any extra node modules , except for one this is used to implement bootstrap functionality in Angular. we are using ngx-bootstrap here to implement bootstrap, if already installed head for the next step, if not first install the ngx-bootstrap by executing the below given code in your cli.

npm install ngx-bootstrap --save

this will install the above node module into your project and you should also include bootstrap css into your index.html to include bootsrap style to your project. 

<!--- index.html -->
<link href="" rel="stylesheet">

Create a new component for the code implementation lets name it duallistbox. execute the below given code in your cli to create the component in your project.

ng generate component duallistbox
since our component is created, lets open duallistbox.component.ts file, copy and paste the below given code to your file.

import { Component, OnInit } from '@angular/core'; @Component({   selector: 'app-duallistbox',   templateUrl: './duallistbox.component.html',   styleUrls: ['./duallistbox.component.css'] }) export class DuallistboxComponent implements OnInit {  target = [];  source: any = [];  constructor() {   this.source = [ 'Gowriter', 'Angular', 'Angular JS', 'Program', 'Multi Select', 'Dual Listbox' ];  }   ngOnInit() {} }
Next for the html part, open duallistbox.html copy and paste the below given html code.

<div class="container">  <dual-list [source]="source" [(destination)]="target" height="150px"></dual-list> </div>

that's it save your code and refresh your project, now you should see multi select ui working on your angular project. all you need to do is just replace the this.source array with your own data.

vinay kumar

Founder of, Tech Enthusiast, Normal type of Person with passion toward's work.

No comments: