How can implement grouping in ng-select of Angular2?

Question

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:

Pupundra · Accepted Answer · 2023-02-09 16:06:18Z

0

Grouping is supported natively by ng-select.

https://ng-select.github.io/ng-select#/grouping

<ng-select [items]="accounts"
           bindLabel="name"
           bindValue="name"
           groupBy="country"
           [multiple]="true"
           [hideSelected]="true"
           [(ngModel)]="selectedAccount">
    <ng-template ng-optgroup-tmp let-item="item">
        {{item.country || 'Unnamed group'}}
    </ng-template>
</ng-select>

answered Feb 9, 2023 at 16:06

Pupundra

112 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How can implement grouping in ng-select of Angular2?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related