Tags

ng-select can create new options on the fly using the addTag input, letting users add items that are not in the list.

Default tags

TypeScript
HTML

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

@Component({
    selector: 'ng-tags-default-example',
    templateUrl: './tags-default-example.component.html',
    styleUrls: ['./tags-default-example.component.scss'],
    changeDetection: ChangeDetectionStrategy.Eager,
    imports: [NgSelectComponent, FormsModule, JsonPipe],
})
export class TagsDefaultExampleComponent implements OnInit {
    selectedCompany;

    ngOnInit() {}
}

<p>If option doesn't exist among items you can add new one using <b>[addTag]="true"</b></p>

<ng-select [items]="[]" [addTag]="true" [(ngModel)]="selectedCompany"> </ng-select>

<br />

Selected value: {{ selectedCompany | json }}

Custom tags

TypeScript
HTML

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

@Component({
    selector: 'ng-tags-custom-example',
    templateUrl: './tags-custom-example.component.html',
    styleUrls: ['./tags-custom-example.component.scss'],
    changeDetection: ChangeDetectionStrategy.Eager,
    imports: [NgSelectComponent, FormsModule, JsonPipe],
})
export class TagsCustomExampleComponent implements OnInit {
    selectedCompanies;
    companies: any[] = [];
    companiesNames = ['Uber', 'Microsoft', 'Flexigen'];

    ngOnInit() {
        this.companiesNames.forEach((c, i) => {
            this.companies.push({ id: i, name: c });
        });
    }

    addTagFn(name) {
        return { name: name, tag: true };
    }
}

<p>By providing custom function to <b>[addTag]</b> you can modify result of new tag</p>

<ng-select [items]="companies" [addTag]="addTagFn" [hideSelected]="true" multiple="true" bindLabel="name" [(ngModel)]="selectedCompanies"> </ng-select>

<br />
Selected value: {{ selectedCompanies | json }}

Server side tags

TypeScript
HTML

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

@Component({
    selector: 'ng-tags-backend-example',
    templateUrl: './tags-backend-example.component.html',
    styleUrls: ['./tags-backend-example.component.scss'],
    changeDetection: ChangeDetectionStrategy.Eager,
    imports: [NgSelectComponent, FormsModule, NgTagTemplateDirective],
})
export class TagsBackendExampleComponent implements OnInit {
    selectedCompanies;
    companies: any[] = [];
    loading = false;
    companiesNames = ['Uber', 'Microsoft', 'Flexigen'];

    ngOnInit() {
        this.companiesNames.forEach((c, i) => {
            this.companies.push({ id: i, name: c });
        });
    }

    addTagPromise(name) {
        return new Promise((resolve) => {
            this.loading = true;
            // Simulate backend call.
            setTimeout(() => {
                resolve({ id: 5, name: name, valid: true });
                this.loading = false;
            }, 1000);
        });
    }
}

<p><b>[addTag]</b> also accepts promise if you need to verify new option with backend</p>

<ng-select [items]="companies" [addTag]="addTagPromise" multiple="true" bindLabel="name" [loading]="loading" [(ngModel)]="selectedCompanies">
    <ng-template ng-tag-tmp let-search="searchTerm"> <b>create new</b>: {{ search }} </ng-template>
</ng-select>

TypeScript
HTML

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

@Component({
    selector: 'ng-tags-closed-dropdown-example',
    templateUrl: './tags-closed-dropdown-example.component.html',
    styleUrls: ['./tags-closed-dropdown-example.component.scss'],
    changeDetection: ChangeDetectionStrategy.Eager,
    imports: [NgSelectComponent],
})
export class TagsClosedDropdownExampleComponent implements OnInit {
    constructor() {}

    ngOnInit() {}
}

<p>Tagging without dropdown. Press enter to add item</p>

<ng-select [items]="[]" [addTag]="true" [multiple]="true" [selectOnTab]="true" [isOpen]="false"> </ng-select>

API

Inputs used by the examples on this page:

Input	Type	Default	Description
[addTag]	`boolean \| ((term: string) => any \| Promise<any>)`	`false`	Allows to create custom options.
addTagText	`string`	`Add item`	Set custom text when using tagging
bindLabel	`string`	`label`	Object property to use for label. Default `label`
[hideSelected]	`boolean`	`false`	Allows to hide selected items.
[isOpen]	`boolean`	`-`	Allows manual control of dropdown opening and closing. `true` - won't close. `false` - won't open.
[items]	`Array<any>`	`[]`	Items array
[loading]	`boolean`	`-`	You can set the loading state from the outside (e.g. async items loading)
[multiple]	`boolean`	`false`	Allows to select multiple items.
[selectOnTab]	`boolean`	`false`	Select marked dropdown item using tab. Default `false`

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