Data sources

ng-select accepts items from an array of objects, inline ng-option elements, or asynchronous/observable data.

Array of objects

Bind an array of objects (or primitives) to the items input.

TypeScript
HTML

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

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

    people: Person[] = [];
    selectedPersonId = '5a15b13c36e7a7f00cf0d7cb';

    selectedSimpleItem = 'Two';
    simpleItems = [];

    ngOnInit() {
        this.dataService.getPeople().subscribe((items) => (this.people = items));
        this.simpleItems = [true, 'Two', 3];
    }
}

<p>You can also set array of objects as items input</p>

<ng-select [(ngModel)]="selectedPersonId" [items]="people" bindLabel="name" bindValue="id"> </ng-select>

<hr />
<p>While array of objects is the most common items source, you may want to set simple array of strings, numbers, booleans</p>

<ng-select [(ngModel)]="selectedSimpleItem" [items]="simpleItems"> </ng-select>

Display data using ng-option

For simple use cases, omit the items array and declare options directly in the template with ng-option.

TypeScript
HTML

import { JsonPipe } from '@angular/common';
import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { NgOptionComponent, NgSelectComponent } from '@ng-select/ng-select';

@Component({
    selector: 'ng-data-source-options-example',
    templateUrl: './data-source-options-example.component.html',
    styleUrls: ['./data-source-options-example.component.scss'],
    changeDetection: ChangeDetectionStrategy.Eager,
    imports: [NgSelectComponent, FormsModule, NgOptionComponent, JsonPipe],
})
export class DataSourceOptionsExampleComponent implements OnInit {
    selectedCars = [3];
    cars = [
        { id: 1, name: 'Volvo' },
        { id: 2, name: 'Saab', disabled: true },
        { id: 3, name: 'Opel' },
        { id: 4, name: 'Audi' },
    ];

    ngOnInit() {}

    toggleDisabled() {
        const car: any = this.cars[1];
        car.disabled = !car.disabled;
    }
}

<p>
    If you have simple use case, you can omit items array and bind options directly in html using <b>ng-option</b>
    component.
</p>

<div>
    <button type="button" class="btn btn-secondary btn-sm" (click)="toggleDisabled()">Toggle disabled</button>
</div>
<br />
<ng-select [multiple]="true" [(ngModel)]="selectedCars">
    @for (car of cars; track car) {
        <ng-option [value]="car.id" [disabled]="car.disabled">{{ car.name }}</ng-option>
    }
    <ng-option value="custom">Custom</ng-option>
</ng-select>

<br />Selected car ID: {{ selectedCars | json }}

Backend data with async pipe

Load items from a backend as an observable and bind them with the async pipe.

TypeScript
HTML

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

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

    people$: Observable<Person[]>;
    selectedPersonId = '5a15b13c36e7a7f00cf0d7cb';

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

<p class="card-text">
    Most common case is showing data from backend API and with ng-select this is extremely simple since you can bind directly to observable when using angular
    <b> | async</b> pipe
</p>

<ng-select [items]="people$ | async" bindLabel="name" autofocus bindValue="id" [(ngModel)]="selectedPersonId"> </ng-select>

<br />Selected: {{ selectedPersonId }}

API

Inputs used by the examples on this page:

Input	Type	Default	Description
[items]	`Array<any>`	`[]`	Items array
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.
[multiple]	`boolean`	`false`	Allows to select multiple items.
[loading]	`boolean`	`-`	You can set the loading state from the outside (e.g. async items loading)
loadingText	`string`	`Loading...`	Set custom text when for loading items

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