Categories
Angular MEA Stack

Dual Listbox With Angular Material

Simple dual listbox component to use with your Angular 10 App, along with Angular Material and CDK Drag and Drop

Simple dual listbox component to use with your Angular 10 App with Angular Material

I found really strange that I’m the only one that needed a dual listbox, and on a simple google search I only found those two: Angular Dual-Listbox by czeckd and NgxMaterialDualListbox by blandialcani and both are great 😁 even if blandicani’s one isn’t updated.

As part of my Basic Angular 10 Crud Generator, Powered by Python EVE I needed a Dual Listbox, so why not share with you.

Source Code:

Dependencies

You will need:

  • Angular 10
  • Angular Material ^10
  • For drag and drop version: Angular cdk ^10

Instalation of Material Dual Listbox

To install this library, run:

Without drag and drop:
$ npm install mea-material-dual-listbox --save

With drag and drop:
$ npm install material-dual-listbox --save

and then from your Angular AppModule:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

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

// Import the module without drag and drop:
import { MaterialDualListboxModule } from 'mea-material-dual-listbox';

// Import the module with drag and drop:
import { MaterialDualListboxModule } from 'material-dual-listbox';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,

    // Add the module in the impots
    MaterialDualListboxModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Once the library is imported, you can use the component in your Angular application:

<material-dual-listbox [source]="items" [(destination)]="'itemsDestination'">
</material-dual-listbox>

Attributes

  • source – The source array of objects
  • destination – The destination array of objects
  • (destinationChange) – An event triggered when the destination array changes.
  • display – The field of each object in the source and destination arrays, default is name.
  • width – The width of the component, default is 360px
  • filter – A boolean whether or not to display a filter for the lists, default is true.
  • searchPlaceholder – filter placeholder, default is Filter
  • header – A boolean whether or not to display a header for the lists, default is false
  • itemsTitle – The title of the source array, default is Items
  • itemsSelectedTitle – The title of the destination array, default is Selected Items
  • showIcons – A boolean wheter or not to display icons for the lists, default is true
  • addIcon – The material icon for the source array, default is add
  • removeIcon – The material icon for the destination array, default is delete
  • addIconColor – The color for the material icon of the source array, default is black
  • removeIconColor – The color for the material icon of the destination array, default is black

Buy me a coffee if this helped you

By rockaru

Self-taught web professional

I started in school, continued as a freelancer and now Iā€™m a self-taught web professional with more than 10 years of experience in the field

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.