Data bindings

ng-select can bind to plain values, whole objects, or nested properties using bindLabel and bindValue.

Bind to default values

TypeScript
HTML

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

@Component({
    selector: 'ng-bindings-default-example',
    templateUrl: './bindings-default-example.component.html',
    styleUrls: ['./bindings-default-example.component.scss'],
    changeDetection: ChangeDetectionStrategy.Eager,
    imports: [NgSelectComponent, FormsModule, JsonPipe],
})
export class BindingsDefaultExampleComponent implements OnInit {
    defaultBindingsList = [
        { value: 1, label: 'New York' },
        { value: 2, label: 'London' },
        { value: 3, label: 'Beijing' },
        { value: 4, label: 'New Delhi', disabled: true },
        { value: 5, label: 'Paris' },
    ];

    selectedCity = null;

    ngOnInit() {
        this.selectedCity = this.defaultBindingsList[0];
    }
}

<p>By default ng-select binds to default <b>label</b> property for display, and keeps whole <b>object</b> as selected value</p>

<ng-select [items]="defaultBindingsList" [(ngModel)]="selectedCity"> </ng-select>

<br />
Selected city object: {{ selectedCity | json }}

Bind to custom values

TypeScript
HTML

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

@Component({
    selector: 'ng-bindings-custom-example',
    templateUrl: './bindings-custom-example.component.html',
    styleUrls: ['./bindings-custom-example.component.scss'],
    changeDetection: ChangeDetectionStrategy.Eager,
    imports: [NgSelectComponent, FormsModule, JsonPipe],
})
export class BindingsCustomExampleComponent implements OnInit {
    cities = [
        { id: 1, name: 'New York' },
        { id: 2, name: 'London' },
        { id: 3, name: 'Beijing' },
        { id: 4, name: 'New Delhi', disabled: true },
        { id: 5, name: 'Paris' },
    ];
    selectedCityId: number = null;

    ngOnInit() {
        this.selectedCityId = this.cities[0].id;
    }
}

<p>You can provide custom property for display and selected value.</p>

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

<br />
Selected city ID: {{ selectedCityId | json }}

Bind to nested properties

TypeScript
HTML

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

@Component({
    selector: 'ng-bindings-nested-example',
    templateUrl: './bindings-nested-example.component.html',
    styleUrls: ['./bindings-nested-example.component.scss'],
    changeDetection: ChangeDetectionStrategy.Eager,
    imports: [NgSelectComponent, FormsModule],
})
export class BindingsNestedExampleComponent implements OnInit {
    countries = [
        { id: 1, nested: { countryId: 'L', name: 'Lithuania' } },
        { id: 2, nested: { countryId: 'U', name: 'USA' } },
        { id: 3, nested: { countryId: 'A', name: 'Australia' } },
    ];

    selectedCountryId: string = null;

    ngOnInit() {
        this.selectedCountryId = this.countries[0].nested.countryId;
    }
}

<p>Bind label and value to nested custom property</p>

<ng-select [items]="countries" bindLabel="nested.name" bindValue="nested.countryId" placeholder="Select value" [(ngModel)]="selectedCountryId"> </ng-select>

<br />
Selected country ID: {{ selectedCountryId }}

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.
placeholder	`string`	`-`	Placeholder text.
[compareWith]	`(a: any, b: any) => boolean`	`(a, b) => a === b`	A function to compare the option values with the selected values. The first argument is a value from an option. The second is a value from the selection(model). A boolean should be returned.

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