Angular 2: Multiple Selection
npm install angular-2-multiple-selectionStep 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'