I am implementing multiple select dropdown in my Angular2 project by following this link. But now i have to show grouping in this multiple select dropdown so how can i implement this? Or is there any other plugin or something like that i can follow.
Component Html:
<form [formGroup]="form" class="selector-form">
<div class="marTop20">
<ng-select [options]="options1"
[multiple]="multiple1"
placeholder="Select multiple"
formControlName="selectMultiple"
(opened)="onMultipleOpened()"
(closed)="onMultipleClosed()"
(selected)="onMultipleSelected($event)"
(deselected)="onMultipleDeselected($event)">
</ng-select>
</div>
</form>
Component code in ts file:
export class FilterClientSelectorComponent implements OnInit {
form: FormGroup;
multiple1: boolean = true;
options1: Array<any> = [];
selection: Array<string>;
@ViewChild('preMultiple') preMultiple;
logMultipleString: string = '';
constructor() {
let numOptions = 100;
let opts = new Array(numOptions);
for (let i = 0; i < numOptions; i++) {
opts[i] = {
value: i.toString(),
label: i.toString(),
groupname:'a'
};
}
this.options1 = opts.slice(0);
}
ngOnInit() {
this.form = new FormGroup({});
this.form.addControl('selectMultiple', new FormControl(''));
}
private scrollToBottom(elem) {
elem.scrollTop = elem.scrollHeight;
}
}
I need the output like the following screen shot:
Output Page: