Multiselect checkbox

Render checkboxes inside dropdown options by using custom option templates in multiselect mode.

Multi select with checkboxes

TypeScript
HTML

import { Component, OnInit, inject, ChangeDetectionStrategy } from '@angular/core';
import { DataService, Person } from '../data.service';
import { map } from 'rxjs/operators';
import { FormsModule } from '@angular/forms';
import { JsonPipe, UpperCasePipe } from '@angular/common';
import { NgOptgroupTemplateDirective, NgOptionTemplateDirective, NgSelectComponent } from '@ng-select/ng-select';

@Component({
    selector: 'ng-multi-checkbox-example',
    templateUrl: './multi-checkbox-example.component.html',
    styleUrls: ['./multi-checkbox-example.component.scss'],
    changeDetection: ChangeDetectionStrategy.Eager,
    imports: [NgSelectComponent, FormsModule, NgOptgroupTemplateDirective, NgOptionTemplateDirective, UpperCasePipe, JsonPipe],
})
export class MultiCheckboxExampleComponent implements OnInit {
    private dataService = inject(DataService);

    people: Person[] = [];
    selectedPeople = [];

    ngOnInit() {
        this.dataService
            .getPeople()
            .pipe(map((x) => x.filter((y) => !y.disabled)))
            .subscribe((res) => {
                this.people = res;
                this.selectedPeople = [this.people[0].id, this.people[1].id];
            });
    }
}

<p>Select multiple elements using custom templates with checkboxes</p>

<ng-select
    [items]="people"
    [multiple]="true"
    bindLabel="name"
    groupBy="gender"
    [selectableGroup]="true"
    [closeOnSelect]="false"
    bindValue="id"
    [(ngModel)]="selectedPeople">
    <ng-template ng-optgroup-tmp let-item="item" let-item$="item$" let-index="index">
        <input id="item-{{ index }}" type="checkbox" [ngModel]="item$.selected" /> {{ item.gender | uppercase }}
    </ng-template>
    <ng-template ng-option-tmp let-item="item" let-item$="item$" let-index="index">
        <input id="item-{{ index }}" type="checkbox" [ngModel]="item$.selected" /> {{ item.name }}
    </ng-template>
</ng-select>

<br />
<small>{{ selectedPeople | json }}</small>

Grouped multi select with checkboxes

TypeScript
HTML

import { Component, OnInit, inject, ChangeDetectionStrategy } from '@angular/core';
import { DataService, Person } from '../data.service';
import { map } from 'rxjs/operators';
import { FormsModule } from '@angular/forms';
import { NgOptgroupTemplateDirective, NgOptionTemplateDirective, NgSelectComponent } from '@ng-select/ng-select';
import { UpperCasePipe } from '@angular/common';

@Component({
    selector: 'ng-multi-checkbox-group-example',
    templateUrl: './multi-checkbox-group-example.component.html',
    styleUrls: ['./multi-checkbox-group-example.component.scss'],
    changeDetection: ChangeDetectionStrategy.Eager,
    imports: [NgSelectComponent, FormsModule, NgOptgroupTemplateDirective, NgOptionTemplateDirective, UpperCasePipe],
})
export class MultiCheckboxGroupExampleComponent implements OnInit {
    private dataService = inject(DataService);

    people: Person[] = [];
    selectedPeople = [];

    ngOnInit() {
        this.dataService
            .getPeople()
            .pipe(map((x) => x.filter((y) => !y.disabled)))
            .subscribe((res) => {
                this.people = res;
                this.selectedPeople = [this.people[0].id];
            });
    }
}

<p>Group selects children</p>

<ng-select
    [items]="people"
    [multiple]="true"
    bindLabel="name"
    groupBy="gender"
    [selectableGroup]="true"
    [selectableGroupAsModel]="false"
    [closeOnSelect]="false"
    bindValue="id"
    [(ngModel)]="selectedPeople">
    <ng-template ng-optgroup-tmp let-item="item" let-item$="item$" let-index="index">
        <input id="item-{{ index }}" type="checkbox" [ngModel]="item$.selected" /> {{ item.gender | uppercase }}
    </ng-template>
    <ng-template ng-option-tmp let-item="item" let-item$="item$" let-index="index">
        <input id="item-{{ index }}" type="checkbox" [ngModel]="item$.selected" /> {{ item.name }}
    </ng-template>
</ng-select>

API

Inputs used by the examples on this page:

Input	Type	Default	Description
[items]	`Array<any>`	`[]`	Items array
[multiple]	`boolean`	`false`	Allows to select multiple items.
bindLabel	`string`	`label`	Object property to use for label. Default `label`
bindValue	`string`	`-`	Object property to use for selected model. By default binds to whole object.
[groupBy]	`string` \| `Function`	null	Allow to group items by key or function expression
[selectableGroup]	`boolean`	false	Allow to select group when groupBy is used
[selectableGroupAsModel]	`boolean`	true	Indicates whether to select all children or group itself
[closeOnSelect]	`boolean`	true	Whether to close the menu when a value is selected

See the NgSelectComponent API reference for the complete list of inputs and outputs.