Output events

ng-select emits output events for user interactions such as open, close, change, search, focus, blur, and scroll, so you can react to what happens inside the select.

Output events

TypeScript
HTML

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

interface Event {
    name: string;
    value: any;
}

@Component({
    selector: 'ng-output-events-example',
    templateUrl: './output-events-example.component.html',
    styleUrls: ['./output-events-example.component.scss'],
    changeDetection: ChangeDetectionStrategy.Eager,
    imports: [NgSelectComponent, FormsModule, JsonPipe],
})
export class OutputEventsExampleComponent {
    private dataService = inject(DataService);

    selectedItems: any;
    items = [];

    events: Event[] = [];

    constructor() {
        this.dataService.getPeople().subscribe((items) => {
            this.items = items;
        });
    }

    onChange($event) {
        this.events.push({ name: '(change)', value: $event });
    }

    onFocus($event: Event) {
        this.events.push({ name: '(focus)', value: $event });
    }

    onBlur($event: Event) {
        this.events.push({ name: '(blur)', value: $event });
    }

    onOpen() {
        this.events.push({ name: '(open)', value: null });
    }

    onClose() {
        this.events.push({ name: '(close)', value: null });
    }

    onAdd($event) {
        this.events.push({ name: '(add)', value: $event });
    }

    onRemove($event) {
        this.events.push({ name: '(remove)', value: $event });
    }

    onClear() {
        this.events.push({ name: '(clear)', value: null });
    }

    onScrollToEnd($event) {
        this.events.push({ name: '(scrollToEnd)', value: $event });
    }

    onSearch($event) {
        this.events.push({ name: '(search)', value: $event });
    }
}

<ng-select
    placeholder="Select some items"
    [items]="items"
    [(ngModel)]="selectedItems"
    bindLabel="name"
    bindValue="id"
    [multiple]="true"
    (open)="onOpen()"
    (close)="onClose()"
    (focus)="onFocus($event)"
    (search)="onSearch($event)"
    (blur)="onBlur($event)"
    (clear)="onClear()"
    (add)="onAdd($event)"
    (scrollToEnd)="onScrollToEnd($event)"
    (remove)="onRemove($event)"
    (change)="onChange($event)">
</ng-select>

@if (events.length > 0) {
    <div>
        <br />
        <button (click)="events = []" class="btn btn-secondary btn-sm">Clear events</button>
        <br />
        <br />
    </div>
}

@for (event of events; track event) {
    <div>
        <small>{{ event.name }} - {{ event.value | json }}</small>
        <hr />
    </div>
}

API

Output	Description
(add)	Fired when item is added while `[multiple]="true"`. Outputs added item
(blur)	Fired on select blur
(change)	Fired on selection change. Outputs the selected item (an array when `[multiple]="true"`) as the whole item object, not the `bindValue`-projected model value
(close)	Fired on select dropdown close
(clear)	Fired on clear icon click
(focus)	Fired on select focus
(search)	Fired while typing search term. Outputs search term with filtered items
(open)	Fired on select dropdown open
(remove)	Fired when item is removed while `[multiple]="true"`
(scroll)	Fired when scrolled (only when `[virtualScroll]="true"`). Provides the start and end index of the currently available items. Can be used for loading more items in chunks before the user has scrolled all the way to the bottom of the list.
(scrollToEnd)	Fired when scrolled to the end of items. Can be used for loading more items in chunks.

Methods

Name	Description
open	Opens the select dropdown panel
close	Closes the select dropdown panel
focus	Focuses the select element
blur	Blurs the select element

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