Multiselect

Setting [multiple]="true" enables multiselect mode, allowing users to select more than one item at a time.

Multi select

TypeScript
HTML

import { Component, OnInit, inject, ChangeDetectionStrategy } from '@angular/core';
import { Observable } from 'rxjs';
import { DataService } from '../data.service';
import { FormsModule } from '@angular/forms';
import { AsyncPipe } from '@angular/common';
import { NgSelectComponent } from '@ng-select/ng-select';

@Component({
    selector: 'ng-multi-select-default-example',
    templateUrl: './multi-select-default-example.component.html',
    styleUrls: ['./multi-select-default-example.component.scss'],
    changeDetection: ChangeDetectionStrategy.Eager,
    imports: [NgSelectComponent, FormsModule, AsyncPipe],
})
export class MultiSelectDefaultExampleComponent implements OnInit {
    private dataService = inject(DataService);

    people$: Observable<any[]>;
    selectedPeople = [{ name: 'Karyn Wright' }];

    ngOnInit() {
        this.people$ = this.dataService.getPeople();
    }

    clearModel() {
        this.selectedPeople = [];
    }

    changeModel() {
        this.selectedPeople = [{ name: 'New person' }];
    }
}

<p>Select multiple elements</p>

<ng-select
    [items]="people$ | async"
    [multiple]="true"
    [closeOnSelect]="false"
    [searchable]="false"
    bindLabel="name"
    placeholder="Select people"
    [(ngModel)]="selectedPeople">
</ng-select>

<div class="mt-3">
    Selected value: <br />
    <ul>
        @for (item of selectedPeople; track item.name) {
            <li>{{ item.name }}</li>
        }
    </ul>
    <button (click)="clearModel()" class="btn btn-secondary btn-sm">Clear model</button>
    <button (click)="changeModel()" class="btn btn-secondary btn-sm">Change model</button>
</div>

Hidden selected items

TypeScript
HTML

import { Component, OnInit, inject, ChangeDetectionStrategy } from '@angular/core';
import { Observable } from 'rxjs';
import { DataService } from '../data.service';
import { FormsModule } from '@angular/forms';
import { AsyncPipe } from '@angular/common';
import { NgSelectComponent } from '@ng-select/ng-select';

@Component({
    selector: 'ng-multi-select-hidden-example',
    templateUrl: './multi-select-hidden-example.component.html',
    styleUrls: ['./multi-select-hidden-example.component.scss'],
    changeDetection: ChangeDetectionStrategy.Eager,
    imports: [NgSelectComponent, FormsModule, AsyncPipe],
})
export class MultiSelectHiddenExampleComponent implements OnInit {
    private dataService = inject(DataService);

    people$: Observable<any[]>;
    selectedPeople = [];

    ngOnInit() {
        this.people$ = this.dataService.getPeople();
    }
}

<p>Selected items won't appear among dropdown options</p>

<ng-select
    [items]="people$ | async"
    [multiple]="true"
    [closeOnSelect]="false"
    [hideSelected]="true"
    bindLabel="name"
    placeholder="Select people"
    [(ngModel)]="selectedPeople">
</ng-select>

Limited number of selections

TypeScript
HTML

import { Component, OnInit, inject, ChangeDetectionStrategy } from '@angular/core';
import { Observable } from 'rxjs';
import { DataService } from '../data.service';
import { FormsModule } from '@angular/forms';
import { AsyncPipe } from '@angular/common';
import { NgSelectComponent } from '@ng-select/ng-select';

@Component({
    selector: 'ng-multi-select-limit-example',
    templateUrl: './multi-select-limit-example.component.html',
    styleUrls: ['./multi-select-limit-example.component.scss'],
    changeDetection: ChangeDetectionStrategy.Eager,
    imports: [NgSelectComponent, FormsModule, AsyncPipe],
})
export class MultiSelectLimitExampleComponent implements OnInit {
    private dataService = inject(DataService);

    people$: Observable<any[]>;
    selectedPeople = [];

    ngOnInit() {
        this.people$ = this.dataService.getPeople();
    }

    clearModel() {
        this.selectedPeople = [];
    }
}

<p>Select multiple elements with a limit number of selections (e.g.: 3)</p>

@if (selectedPeople.length === 3 && select.focused) {
    <div class="alert alert-warning mb-2">
        <small>Max selection reached</small>
    </div>
}

<ng-select #select [items]="people$ | async" [multiple]="true" [maxSelectedItems]="3" bindLabel="name" [(ngModel)]="selectedPeople"> </ng-select>

<div class="mt-3">
    Selected value: <br />
    <ul>
        @for (item of selectedPeople; track item) {
            <li>{{ item.name }}</li>
        }
    </ul>
    <button (click)="clearModel()" class="btn btn-secondary btn-sm">Clear model</button>
</div>

Disabled select

TypeScript
HTML

import { Component, OnInit, inject, ChangeDetectionStrategy } from '@angular/core';
import { Observable } from 'rxjs';
import { DataService } from '../data.service';
import { FormsModule } from '@angular/forms';
import { AsyncPipe } from '@angular/common';
import { NgSelectComponent } from '@ng-select/ng-select';

@Component({
    selector: 'ng-multi-select-disabled-example',
    templateUrl: './multi-select-disabled-example.component.html',
    styleUrls: ['./multi-select-disabled-example.component.scss'],
    changeDetection: ChangeDetectionStrategy.Eager,
    imports: [NgSelectComponent, FormsModule, AsyncPipe],
})
export class MultiSelectDisabledExampleComponent implements OnInit {
    private dataService = inject(DataService);

    people$: Observable<any[]>;
    selectedPeople = [];
    disable = true;

    ngOnInit() {
        this.people$ = this.dataService.getPeople();
        this.setSelectedPeople();
    }

    toggleModel() {
        if (this.selectedPeople.length > 0) {
            this.selectedPeople = [];
        } else {
            this.setSelectedPeople();
        }
    }

    setSelectedPeople() {
        this.selectedPeople = [
            { id: '5a15b13c2340978ec3d2c0ea', name: 'Rochelle Estes', disabled: true },
            { id: '5a15b13c663ea0af9ad0dae8', name: 'Mendoza Ruiz' },
            { id: '5a15b13c728cd3f43cc0fe8a', name: 'Marquez Nolan', disabled: true },
        ];
    }
}

<p>Disabled multiple elements</p>

<ng-select [items]="people$ | async" bindLabel="name" [multiple]="true" [disabled]="disable" [(ngModel)]="selectedPeople"> </ng-select>

<br />
<button class="btn btn-secondary btn-sm" (click)="disable = !disable">Toggle disabled</button>
<button class="btn btn-secondary btn-sm" (click)="toggleModel()">Toggle model</button>

Custom selected item template

TypeScript
HTML

import { Component, OnInit, inject, ChangeDetectionStrategy } from '@angular/core';
import { Observable } from 'rxjs';
import { DataService } from '../data.service';
import { FormsModule } from '@angular/forms';
import { NgLabelTemplateDirective, NgOptionTemplateDirective, NgSelectComponent } from '@ng-select/ng-select';
import { AsyncPipe } from '@angular/common';

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

    githubUsers$: Observable<any[]>;
    selectedUsers = ['anjmao'];

    ngOnInit() {
        this.githubUsers$ = this.dataService.getGithubAccounts('anjm');
    }
}

<p>Custom template for each selected item using <b>ng-label-tmp</b></p>

<ng-select [items]="githubUsers$ | async" [multiple]="true" bindLabel="login" bindValue="login" [(ngModel)]="selectedUsers">
    <ng-template ng-label-tmp let-item="item" let-clear="clear">
        <span class="ng-value-label"><img [src]="item.avatar_url" width="20px" height="20px" /> {{ item.login }}</span>
        <span class="ng-value-icon right" (click)="clear(item)" aria-hidden="true">×</span>
    </ng-template>

    <ng-template ng-option-tmp let-item="item"> <img [src]="item.avatar_url" width="20px" height="20px" /> {{ item.login }} </ng-template>
</ng-select>

Custom selected items template

TypeScript
HTML

import { Component, OnInit, inject, ChangeDetectionStrategy } from '@angular/core';
import { Observable } from 'rxjs';
import { DataService } from '../data.service';
import { FormsModule } from '@angular/forms';
import { NgMultiLabelTemplateDirective, NgSelectComponent } from '@ng-select/ng-select';
import { AsyncPipe, SlicePipe } from '@angular/common';

@Component({
    selector: 'ng-multi-select-custom-example',
    templateUrl: './multi-select-custom-example.component.html',
    styleUrls: ['./multi-select-custom-example.component.scss'],
    changeDetection: ChangeDetectionStrategy.Eager,
    imports: [NgSelectComponent, FormsModule, NgMultiLabelTemplateDirective, AsyncPipe, SlicePipe],
})
export class MultiSelectCustomExampleComponent implements OnInit {
    private dataService = inject(DataService);

    githubUsers$: Observable<any[]>;
    selectedUsers = ['anjmao', 'anjmittu', 'anjmendoza'];

    ngOnInit() {
        this.githubUsers$ = this.dataService.getGithubAccounts('anjm');
    }
}

<p>Custom template for all selected items using <b>ng-multi-label-tmp</b></p>

<ng-select [items]="githubUsers$ | async" [multiple]="true" bindLabel="login" bindValue="login" placeholder="Select items" [(ngModel)]="selectedUsers">
    <ng-template ng-multi-label-tmp let-items="items" let-clear="clear">
        @for (item of items | slice: 0 : 2; track item) {
            <div class="ng-value">
                <span class="ng-value-label"><img [src]="item.avatar_url" width="20px" height="20px" /> {{ item.login }}</span>
                <span class="ng-value-icon right" (click)="clear(item)" aria-hidden="true">×</span>
            </div>
        }
        @if (items.length > 2) {
            <div class="ng-value">
                <span class="ng-value-label">{{ items.length - 2 }} more...</span>
            </div>
        }
    </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.
maxSelectedItems	`number`	none	When multiple = true, allows to set a limit number of selection.
[hideSelected]	`boolean`	`false`	Allows to hide selected items.
[closeOnSelect]	`boolean`	true	Whether to close the menu when a value is selected
[clearOnBackspace]	`boolean`	`true`	Clear selected values one by one when clicking backspace. Default `true`
[clearSearchOnAdd]	`boolean`	`true`	Clears search input when item is selected. Default `true`. Default `false` when closeOnSelect is `false`
[deselectOnClick]	`boolean`	`false`	Deselects a selected item when it is clicked in the dropdown. Default `false`. Default `true` when multiple is `true`
removeText	`string`	`Remove`	Set custom text prefixed to the option label in the aria-label of the remove icon on selected values (multiple mode)
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.
placeholder	`string`	`-`	Placeholder text.
[searchable]	`boolean`	`true`	Allow to search for value. Default `true`

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