Package Exports

ng6-multiselect

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (ng6-multiselect) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Angular6 Multiselect

Angular 6 bootstrap-style

Documentation

Getting Started

Installation

The Mutiselect Dropdown package is published on the npm Registry.
Install the package : npm install ng6-multiselect
Once installed import Ng6MultiSelectModule from the installed package into your module as follows:

Usage

Import Ng6MultiselectModule into NgModule in app.module.ts

import { NG6MultiselectModule } from 'ng6-multiselect';

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

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

import { Component} from '@angular/core';
import { NG6MultiselectModule } from 'ng6-multiselect';

export class AppComponent {
    emptyTitle="Select foods";
  selectedTitle="Food item(s) selected";
  data=[];
  displayData:any=[
    {id:"apple", itemName:"Apple", primaryGroup:"Fruit", secondaryGroup:"Tree Grown"},
    {id:"mango", itemName:"Mango", primaryGroup:"Fruit", secondaryGroup:"Tree Grown"},
    {id:"starfruit", itemName:"Starfruit", primaryGroup:"Fruit", secondaryGroup:"Tree Grown"},
    {id:"kiwi", itemName:"Kiwi", primaryGroup:"Fruit", secondaryGroup:"Vine Grown"},
    {id:"pineapple", itemName:"Pineapple", primaryGroup:"Fruit"},
    {id:"peach", itemName:"Peach", primaryGroup:"Fruit", secondaryGroup:"Tree Grown"},
    {id:"bannana", itemName:"Bannana", primaryGroup:"Fruit", secondaryGroup:"Tree Grown"},
    {id:"tomato", itemName:"Tomato", primaryGroup:"Fruit"},
    {id:"orange", itemName:"Orange", primaryGroup:"Fruit", secondaryGroup:"Tree Grown"},
    {id:"strawberry", itemName:"Strawberry", primaryGroup:"Fruit", secondaryGroup:"Berries"},
    {id:"cherry", itemName:"Cherry", primaryGroup:"Fruit", secondaryGroup:"Tree Grown"},
    {id:"raspberry", itemName:"Raspberry", primaryGroup:"Fruit", secondaryGroup:"Berries"},
    {id:"blackberry", itemName:"Blackberry", primaryGroup:"Fruit", secondaryGroup:"Berries"},
    {id:"blackBean", itemName:"Black Bean", primaryGroup:"Vegtable", secondaryGroup:"Legume"},
    {id:"soyBean", itemName:"Soy Bean", primaryGroup:"Vegtable", secondaryGroup:"Legume"},
    {id:"chickPeas", itemName:"Chickpeas", primaryGroup:"Vegtable", secondaryGroup:"Legume"},
    {id:"peanut", itemName:"Peanut", primaryGroup:"Vegtable", secondaryGroup:"Legume"},
    {id:"greenPeas", itemName:"Green Peas", primaryGroup:"Vegtable", secondaryGroup:"Legume"},
    {id:"lentils", itemName:"Lentils", primaryGroup:"Vegtable", secondaryGroup:"Legume"},
    {id:"artichoke", itemName:"Artichoke", primaryGroup:"Vegtable"},
    {id:"eggplant", itemName:"Eggplant", primaryGroup:"Vegtable"},
    {id:"asparagus", itemName:"Asperagus", primaryGroup:"Vegtable"},
    {id:"broccoli", itemName:"Broccoli", primaryGroup:"Vegtable"},
    {id:"brusselsSprouts", itemName:"Brussels Sprouts", primaryGroup:"Vegtable"},
    {id:"cabbage", itemName:"Cabbage", primaryGroup:"Vegtable"},
    {id:"cauliflower", itemName:"Eggplant", primaryGroup:"Vegtable"}
  ];
    
    constructor(){
    }
    onSelectChange(data:string[]){
        console.log(data);
    }

    onSelect(data:string[]){
        console.log(data);
    }

    onDeselect(data:string[]){
        console.log(data);
    }
}

Add the following component tag in you template

<ng6-multiselect
    [emptyTitle]="'Select foods'"
    [selectedTitle]="Food(s) selected"
    [data]="displayData" 
    [(ngModel)]="data" 
    (onSelectChange)="onSelectChange($event)" 
    (onDeselect)="onSelect($event)"
    (onDeselect)="onDeselect($event)"
    [(ngModel)]="data"
    (onSelectAll)="onSelectAll($event)"></ng6-multiselect>

Callback Methods

All callback methods return the data that is in the multiselect as a string array of id's

onSelect - Triggered when a element is selected, on its own or in a group Example : (onSelect)="onItemSelect($event)"
onDeselect - Triggered when a element is deselected, on its own or in a group Example : (onDeselect)="OnItemDeselect($event)"
onSelectChange - Triggered when a element is selected or deselected, on its own or in a group Example : (onSelectChange)="onSelectChange($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

LGPL-3.0 License.