angular-2-multiple-selection

ng2-multiple-selection

Angular 2: Multiple Selection

DEMO

Step 1: Install angular-2-multiple-selection package

• Using npm:

npm install angular-2-multiple-selection --save

- or add package in "package.json":

"devDependencies": {
    "angular-2-multiple-selection": "*"
}

Step 2: "app.module.ts"

import { MultipleSelect } from "angular-2-multiple-selection/multiple-select";

@NgModule({
    declarations: [
        MultipleSelect
    ]
})

Step 3: "app.component.html":

<multiple-select [multipleSelect]="multipleSelect"></multiple-select>

Step 4: "app.component.ts":

import { ItemsSelect } from "angular-2-multiple-selection/sources/models/items-select";
import { MultipleSelect } from "angular-2-multiple-selection/sources/models/multiple-select";
export class AppComponent {
    multipleSelect: MultipleSelect = new MultipleSelect();
    constructor() {
        this.insertData();        
    }
    insertData() {
        let item1 = new ItemsSelect(1, 1, 'Item 1', true, true, true, []);
        let item9 = new ItemsSelect(9, 9, 'Item 9', true, true, true, []);
        let item10 = new ItemsSelect(10, 10, 'Item 10', false, true, true, []);
        let item11 = new ItemsSelect(11, 11, 'Item 11', true, true, true, [item9, item10]);
        let item8 = new ItemsSelect(8, 8, 'Item 8', true, true, true, [item11]);
        let item2 = new ItemsSelect(2, 2, 'Item 2', true, true, true, [item1, item8]);
        let item4 = new ItemsSelect(4, 4, 'Item 4', true, true, true, []);
        let item3 = new ItemsSelect(3, 3, 'Item 3', false, true, true, [item2, item4]);
        let item5 = new ItemsSelect(5, 5, 'Item 5', false, true, true, []);
        let item6 = new ItemsSelect(6, 6, 'Item 6', true, true, true, []);
        let item7 = new ItemsSelect(7, 7, 'Item 7', true, true, true, [item5, item6]);

        this.multipleSelect.items = [item3, item7];
        this.multipleSelect.numberItemsDisplay = 5;
    }
}

Customize:

this.multipleSelect.showHeader = false // Default: true
this.multipleSelect.numberItemsDisplay = 4; // Default: 3
this.multipleSelect.checkAllCheckBoxText = 'Check All'; // Default: 'Check All Items'
this.multipleSelect.noneItemCheckedText = 'None'; // Default: 'None Selected'
this.multipleSelect.allItemsCheckedText = 'All'; // Default: 'All Items Checked'
this.multipleSelect.subfixNumberItemsCheckedText = ' checked'; // Default: ' selected'
this.multipleSelect.characterValue = '^'; // Default: ','
this.multipleSelect.characterText = ' - '; // Default: ', '
this.multipleSelect.maxHeight = '200px'; // Default: '350px'
this.multipleSelect.maxWidth = '150px'; // Default: '150px'