ngx-multiselect-multicascade v1.0.3

Angular Multiselect Multicascade Dropdown

Angular multiselect multicascade dropdown component for web applications. Easy to integrate and use.

Getting Started

Installation

• The Mutiselect Dropdown package is published on the npm Registry.

• Install the package : npm install angular2-multiselect-dropdown

• Once installed import AngularMultiSelectModule from the installed package into your module as follows:

Usage

Import AngularMultiSelectModule into NgModule in app.module.ts

import { AngularMultiSelectModule } from 'angular2-multiselect-dropdown/angular2-multiselect-dropdown';

@NgModule({
  // ...
  imports: [
    AngularMultiSelectModule,
  ]
  // ...
})

Declare the component data variables and options in your component where you want to consume the dropdown component.

import { Component, OnInit } from '@angular/core';

export class AppComponent implements OnInit {
    dropdownList = [];
    selectedItems = [];
    dropdownSettings = {};
    ngOnInit(){
        this.dropdownList = [
                              {"id":1,"itemName":"India"},
                              {"id":2,"itemName":"Singapore"},
                              {"id":3,"itemName":"Australia"},
                              {"id":4,"itemName":"Canada"},
                              {"id":5,"itemName":"South Korea"},
                              {"id":6,"itemName":"Germany"},
                              {"id":7,"itemName":"France"},
                              {"id":8,"itemName":"Russia"},
                              {"id":9,"itemName":"Italy"},
                              {"id":10,"itemName":"Sweden"}
                            ];
        this.selectedItems = [
                                {"id":2,"itemName":"Singapore"},
                                {"id":3,"itemName":"Australia"},
                                {"id":4,"itemName":"Canada"},
                                {"id":5,"itemName":"South Korea"}
                            ];
        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);
    }
}

Add the following component tag in you template

<angular2-multiselect [data]="dropdownList" [(ngModel)]="selectedItems" 
    [settings]="dropdownSettings" 
    (onSelect)="onItemSelect($event)" 
    (onDeSelect)="OnItemDeSelect($event)"
    (onSelectAll)="onSelectAll($event)"
    (onDeSelectAll)="onDeSelectAll($event)"></angular2-multiselect>

Settings

The following list of settings are supported by the component. Configure the settings to meet your requirement.

Callback Methods

• onSelect - Return the selected item on selection. Example : (onSelect)="onItemSelect($event)"
• onDeSelect - Return the un-selected item on un-selecting. Example : (onDeSelect)="OnItemDeSelect($event)"
• onSelectAll - Return the list of all selected items. Example : (onSelectAll)="onSelectAll($event)"
• onDeSelectAll - Returns an empty array. Example : (onDeSelectAll)="onDeSelectAll($event)"

Run locally

• Clone the repository or downlod the .zip,.tar files.
• Run npm install
• Run ng serve for a dev server
• Navigate to http://localhost:4200/ The app will automatically reload if you change any of the source files.

License

MIT License.