ng2-multiple-selection
Angular 2: Multiple Selection
Step 1: Install angular-2-multiple-selection package
- Using npm:
npm install angular-2-multiple-selection --save
"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'