Events in Angular MultiColumn ComboBox component

14 Jun 202424 minutes to read

This section describes the multicolumn combobox events that will be triggered when appropriate actions are performed. The following events are available in the multicolumn combobox component.

actionBegin

The actionBegin event is triggered when actions such as sorting, filtering, grouping starts.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { FormsModule, ReactiveFormsModule } from '@angular/forms'
import { MultiColumnComboBoxModule } from '@syncfusion/ej2-angular-multicolumn-combobox'
import { ButtonModule } from '@syncfusion/ej2-angular-buttons'



import { Component, HostListener, ViewChild } from '@angular/core';
import { MultiColumnComboBoxComponent } from '@syncfusion/ej2-angular-multicolumn-combobox';


@Component({
    imports: [ FormsModule, ReactiveFormsModule, MultiColumnComboBoxModule, ButtonModule ],
    standalone: true,
    selector: 'app-root',
    // specifies the template string for the MultiColumn ComboBox component with change event
    template: `<ejs-multicolumncombobox id='multicolumn' #multicolumn [dataSource]='empData' [fields]='fields' (actionBegin)='actionBegin()' width='500px' text='Michael'>
                  <e-columns>
                    <e-column field='EmpID' header='Employee ID' width='100'></e-column>
                    <e-column field='Name' header='Name' width='90'></e-column>
                    <e-column field='Designation' header='Designation' width='100'></e-column>
                    <e-column field='Country' header='Country' width='90'></e-column>
                  </e-columns>
                </ejs-multicolumncombobox>`
})
export class AppComponent {
    // defined the array of object data
    public empData: Object[] = [ 
        { "EmpID": 1001, "Name": "Andrew Fuller", "Designation": "Team Lead", "Country": "England" },
        { "EmpID": 1002, "Name": "Robert", "Designation": "Developer", "Country": "USA" },
        { "EmpID": 1003, "Name": "Michael", "Designation": "HR", "Country": "Russia" },
        { "EmpID": 1004, "Name": "Steven Buchanan", "Designation": "Product Manager", "Country": "Ukraine" },
        { "EmpID": 1005, "Name": "Margaret Peacock", "Designation": "Developer", "Country": "Egypt" },
        { "EmpID": 1006, "Name": "Janet Leverling", "Designation": "Team Lead", "Country": "Africa" },
        { "EmpID": 1007, "Name": "Alice", "Designation": "Product Manager", "Country": "Australia" },
        { "EmpID": 1008, "Name": "Bob", "Designation": "Developer", "Country": "India" },
        { "EmpID": 1009, "Name": "John", "Designation": "Product Manager", "Country": "Ireland"},
        { "EmpID": 1010, "Name": "Mario Pontes", "Designation": "Team Lead", "Country": "South Africa" },
        { "EmpID": 1011, "Name": "Yang Wang", "Designation": "Developer", "Country": "Russia" },
        { "EmpID": 1012, "Name": "David", "Designation": "Product Manager", "Country": "Egypt" },
        { "EmpID": 1013, "Name": "Antonio Bianchi", "Designation": "Team Lead", "Country": "USA" },
        { "EmpID": 1014, "Name": "Laura", "Designation": "Developer", "Country": "England" },
        { "EmpID": 1015, "Name": "Carlos Hernandez", "Designation": "Developer", "Country": "Canada" },
        { "EmpID": 1016, "Name": "Lily", "Designation": "Product Manager", "Country": "France" },
        { "EmpID": 1017, "Name": "Tom Williams", "Designation": "Developer", "Country": "Ukraine" },
        { "EmpID": 1018, "Name": "Grace", "Designation": "Developer", "Country": "Australia" },
        { "EmpID": 1019, "Name": "Olivia", "Designation": "Team Lead", "Country": "Ireland" },
        { "EmpID": 1020, "Name": "James", "Designation": "Developer", "Country": "China" },
    ]; 
    // maps the appropriate column to fields property
    public fields: Object = { text: 'Name', value: 'EmpID' };
    public actionBegin = () => {
      // Your required action here
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

actionFailure

The actionFailure event is triggered when the data fetch request from the remote server fails.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { FormsModule, ReactiveFormsModule } from '@angular/forms'
import { MultiColumnComboBoxModule } from '@syncfusion/ej2-angular-multicolumn-combobox'
import { ButtonModule } from '@syncfusion/ej2-angular-buttons'



import { Component, HostListener, ViewChild } from '@angular/core';
import { MultiColumnComboBoxComponent } from '@syncfusion/ej2-angular-multicolumn-combobox';


@Component({
    imports: [ FormsModule, ReactiveFormsModule, MultiColumnComboBoxModule, ButtonModule ],
    standalone: true,
    selector: 'app-root',
    // specifies the template string for the MultiColumn ComboBox component with change event
    template: `<ejs-multicolumncombobox id='multicolumn' #multicolumn [dataSource]='empData' [fields]='fields' (actionFailure)='actionFailure()' width='500px' text='Michael'>
                  <e-columns>
                    <e-column field='EmpID' header='Employee ID' width='100'></e-column>
                    <e-column field='Name' header='Name' width='90'></e-column>
                    <e-column field='Designation' header='Designation' width='100'></e-column>
                    <e-column field='Country' header='Country' width='90'></e-column>
                  </e-columns>
                </ejs-multicolumncombobox>`
})
export class AppComponent {
    // defined the array of object data
    public empData: Object[] = [ 
        { "EmpID": 1001, "Name": "Andrew Fuller", "Designation": "Team Lead", "Country": "England" },
        { "EmpID": 1002, "Name": "Robert", "Designation": "Developer", "Country": "USA" },
        { "EmpID": 1003, "Name": "Michael", "Designation": "HR", "Country": "Russia" },
        { "EmpID": 1004, "Name": "Steven Buchanan", "Designation": "Product Manager", "Country": "Ukraine" },
        { "EmpID": 1005, "Name": "Margaret Peacock", "Designation": "Developer", "Country": "Egypt" },
        { "EmpID": 1006, "Name": "Janet Leverling", "Designation": "Team Lead", "Country": "Africa" },
        { "EmpID": 1007, "Name": "Alice", "Designation": "Product Manager", "Country": "Australia" },
        { "EmpID": 1008, "Name": "Bob", "Designation": "Developer", "Country": "India" },
        { "EmpID": 1009, "Name": "John", "Designation": "Product Manager", "Country": "Ireland"},
        { "EmpID": 1010, "Name": "Mario Pontes", "Designation": "Team Lead", "Country": "South Africa" },
        { "EmpID": 1011, "Name": "Yang Wang", "Designation": "Developer", "Country": "Russia" },
        { "EmpID": 1012, "Name": "David", "Designation": "Product Manager", "Country": "Egypt" },
        { "EmpID": 1013, "Name": "Antonio Bianchi", "Designation": "Team Lead", "Country": "USA" },
        { "EmpID": 1014, "Name": "Laura", "Designation": "Developer", "Country": "England" },
        { "EmpID": 1015, "Name": "Carlos Hernandez", "Designation": "Developer", "Country": "Canada" },
        { "EmpID": 1016, "Name": "Lily", "Designation": "Product Manager", "Country": "France" },
        { "EmpID": 1017, "Name": "Tom Williams", "Designation": "Developer", "Country": "Ukraine" },
        { "EmpID": 1018, "Name": "Grace", "Designation": "Developer", "Country": "Australia" },
        { "EmpID": 1019, "Name": "Olivia", "Designation": "Team Lead", "Country": "Ireland" },
        { "EmpID": 1020, "Name": "James", "Designation": "Developer", "Country": "China" },
    ]; 
    // maps the appropriate column to fields property
    public fields: Object = { text: 'Name', value: 'EmpID' };
    public actionFailure = () => {
      // Your required action here
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

actionComplete

The actionComplete event is triggered when actions such as sorting, filtering, grouping are completed.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { FormsModule, ReactiveFormsModule } from '@angular/forms'
import { MultiColumnComboBoxModule } from '@syncfusion/ej2-angular-multicolumn-combobox'
import { ButtonModule } from '@syncfusion/ej2-angular-buttons'



import { Component, HostListener, ViewChild } from '@angular/core';
import { MultiColumnComboBoxComponent } from '@syncfusion/ej2-angular-multicolumn-combobox';


@Component({
    imports: [ FormsModule, ReactiveFormsModule, MultiColumnComboBoxModule, ButtonModule ],
    standalone: true,
    selector: 'app-root',
    // specifies the template string for the MultiColumn ComboBox component with change event
    template: `<ejs-multicolumncombobox id='multicolumn' #multicolumn [dataSource]='empData' [fields]='fields' (actionComplete)='actionComplete()' width='500px' text='Michael'>
                  <e-columns>
                    <e-column field='EmpID' header='Employee ID' width='100'></e-column>
                    <e-column field='Name' header='Name' width='90'></e-column>
                    <e-column field='Designation' header='Designation' width='100'></e-column>
                    <e-column field='Country' header='Country' width='90'></e-column>
                  </e-columns>
                </ejs-multicolumncombobox>`
})
export class AppComponent {
    // defined the array of object data
    public empData: Object[] = [ 
        { "EmpID": 1001, "Name": "Andrew Fuller", "Designation": "Team Lead", "Country": "England" },
        { "EmpID": 1002, "Name": "Robert", "Designation": "Developer", "Country": "USA" },
        { "EmpID": 1003, "Name": "Michael", "Designation": "HR", "Country": "Russia" },
        { "EmpID": 1004, "Name": "Steven Buchanan", "Designation": "Product Manager", "Country": "Ukraine" },
        { "EmpID": 1005, "Name": "Margaret Peacock", "Designation": "Developer", "Country": "Egypt" },
        { "EmpID": 1006, "Name": "Janet Leverling", "Designation": "Team Lead", "Country": "Africa" },
        { "EmpID": 1007, "Name": "Alice", "Designation": "Product Manager", "Country": "Australia" },
        { "EmpID": 1008, "Name": "Bob", "Designation": "Developer", "Country": "India" },
        { "EmpID": 1009, "Name": "John", "Designation": "Product Manager", "Country": "Ireland"},
        { "EmpID": 1010, "Name": "Mario Pontes", "Designation": "Team Lead", "Country": "South Africa" },
        { "EmpID": 1011, "Name": "Yang Wang", "Designation": "Developer", "Country": "Russia" },
        { "EmpID": 1012, "Name": "David", "Designation": "Product Manager", "Country": "Egypt" },
        { "EmpID": 1013, "Name": "Antonio Bianchi", "Designation": "Team Lead", "Country": "USA" },
        { "EmpID": 1014, "Name": "Laura", "Designation": "Developer", "Country": "England" },
        { "EmpID": 1015, "Name": "Carlos Hernandez", "Designation": "Developer", "Country": "Canada" },
        { "EmpID": 1016, "Name": "Lily", "Designation": "Product Manager", "Country": "France" },
        { "EmpID": 1017, "Name": "Tom Williams", "Designation": "Developer", "Country": "Ukraine" },
        { "EmpID": 1018, "Name": "Grace", "Designation": "Developer", "Country": "Australia" },
        { "EmpID": 1019, "Name": "Olivia", "Designation": "Team Lead", "Country": "Ireland" },
        { "EmpID": 1020, "Name": "James", "Designation": "Developer", "Country": "China" },
    ]; 
    // maps the appropriate column to fields property
    public fields: Object = { text: 'Name', value: 'EmpID' };
    public actionComplete = () => {
      // Your required action here
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

select

The select event is triggered when the popup item is selected.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { FormsModule, ReactiveFormsModule } from '@angular/forms'
import { MultiColumnComboBoxModule } from '@syncfusion/ej2-angular-multicolumn-combobox'
import { ButtonModule } from '@syncfusion/ej2-angular-buttons'



import { Component, HostListener, ViewChild } from '@angular/core';
import { SelectEventArgs } from '@syncfusion/ej2-multicolumn-combobox';


@Component({
    imports: [ FormsModule, ReactiveFormsModule, MultiColumnComboBoxModule, ButtonModule ],
    standalone: true,
    selector: 'app-root',
    // specifies the template string for the MultiColumn ComboBox component with change event
    template: `<ejs-multicolumncombobox id='multicolumn' #multicolumn [dataSource]='empData' [fields]='fields' (select)='select($event)' width='500px' text='Michael'>
                  <e-columns>
                    <e-column field='EmpID' header='Employee ID' width='100'></e-column>
                    <e-column field='Name' header='Name' width='90'></e-column>
                    <e-column field='Designation' header='Designation' width='100'></e-column>
                    <e-column field='Country' header='Country' width='90'></e-column>
                  </e-columns>
                </ejs-multicolumncombobox>`
})
export class AppComponent {
    // defined the array of object data
    public empData: Object[] = [ 
        { "EmpID": 1001, "Name": "Andrew Fuller", "Designation": "Team Lead", "Country": "England" },
        { "EmpID": 1002, "Name": "Robert", "Designation": "Developer", "Country": "USA" },
        { "EmpID": 1003, "Name": "Michael", "Designation": "HR", "Country": "Russia" },
        { "EmpID": 1004, "Name": "Steven Buchanan", "Designation": "Product Manager", "Country": "Ukraine" },
        { "EmpID": 1005, "Name": "Margaret Peacock", "Designation": "Developer", "Country": "Egypt" },
        { "EmpID": 1006, "Name": "Janet Leverling", "Designation": "Team Lead", "Country": "Africa" },
        { "EmpID": 1007, "Name": "Alice", "Designation": "Product Manager", "Country": "Australia" },
        { "EmpID": 1008, "Name": "Bob", "Designation": "Developer", "Country": "India" },
        { "EmpID": 1009, "Name": "John", "Designation": "Product Manager", "Country": "Ireland"},
        { "EmpID": 1010, "Name": "Mario Pontes", "Designation": "Team Lead", "Country": "South Africa" },
        { "EmpID": 1011, "Name": "Yang Wang", "Designation": "Developer", "Country": "Russia" },
        { "EmpID": 1012, "Name": "David", "Designation": "Product Manager", "Country": "Egypt" },
        { "EmpID": 1013, "Name": "Antonio Bianchi", "Designation": "Team Lead", "Country": "USA" },
        { "EmpID": 1014, "Name": "Laura", "Designation": "Developer", "Country": "England" },
        { "EmpID": 1015, "Name": "Carlos Hernandez", "Designation": "Developer", "Country": "Canada" },
        { "EmpID": 1016, "Name": "Lily", "Designation": "Product Manager", "Country": "France" },
        { "EmpID": 1017, "Name": "Tom Williams", "Designation": "Developer", "Country": "Ukraine" },
        { "EmpID": 1018, "Name": "Grace", "Designation": "Developer", "Country": "Australia" },
        { "EmpID": 1019, "Name": "Olivia", "Designation": "Team Lead", "Country": "Ireland" },
        { "EmpID": 1020, "Name": "James", "Designation": "Developer", "Country": "China" },
    ]; 
    // maps the appropriate column to fields property
    public fields: Object = { text: 'Name', value: 'EmpID' };
    public select = (args: SelectEventArgs) => {
      // Your required action here
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

change

The change event is triggered when the popup item is selected or when the model value is changed.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { FormsModule, ReactiveFormsModule } from '@angular/forms'
import { MultiColumnComboBoxModule } from '@syncfusion/ej2-angular-multicolumn-combobox'
import { ButtonModule } from '@syncfusion/ej2-angular-buttons'



import { Component, HostListener, ViewChild } from '@angular/core';
import { ChangeEventArgs } from '@syncfusion/ej2-multicolumn-combobox';


@Component({
    imports: [ FormsModule, ReactiveFormsModule, MultiColumnComboBoxModule, ButtonModule ],
    standalone: true,
    selector: 'app-root',
    // specifies the template string for the MultiColumn ComboBox component with change event
    template: `<ejs-multicolumncombobox id='multicolumn' #multicolumn [dataSource]='empData' [fields]='fields' (change)='change($event)' width='500px' text='Michael'>
                  <e-columns>
                    <e-column field='EmpID' header='Employee ID' width='100'></e-column>
                    <e-column field='Name' header='Name' width='90'></e-column>
                    <e-column field='Designation' header='Designation' width='100'></e-column>
                    <e-column field='Country' header='Country' width='90'></e-column>
                  </e-columns>
                </ejs-multicolumncombobox>`
})
export class AppComponent {
    // defined the array of object data
    public empData: Object[] = [ 
        { "EmpID": 1001, "Name": "Andrew Fuller", "Designation": "Team Lead", "Country": "England" },
        { "EmpID": 1002, "Name": "Robert", "Designation": "Developer", "Country": "USA" },
        { "EmpID": 1003, "Name": "Michael", "Designation": "HR", "Country": "Russia" },
        { "EmpID": 1004, "Name": "Steven Buchanan", "Designation": "Product Manager", "Country": "Ukraine" },
        { "EmpID": 1005, "Name": "Margaret Peacock", "Designation": "Developer", "Country": "Egypt" },
        { "EmpID": 1006, "Name": "Janet Leverling", "Designation": "Team Lead", "Country": "Africa" },
        { "EmpID": 1007, "Name": "Alice", "Designation": "Product Manager", "Country": "Australia" },
        { "EmpID": 1008, "Name": "Bob", "Designation": "Developer", "Country": "India" },
        { "EmpID": 1009, "Name": "John", "Designation": "Product Manager", "Country": "Ireland"},
        { "EmpID": 1010, "Name": "Mario Pontes", "Designation": "Team Lead", "Country": "South Africa" },
        { "EmpID": 1011, "Name": "Yang Wang", "Designation": "Developer", "Country": "Russia" },
        { "EmpID": 1012, "Name": "David", "Designation": "Product Manager", "Country": "Egypt" },
        { "EmpID": 1013, "Name": "Antonio Bianchi", "Designation": "Team Lead", "Country": "USA" },
        { "EmpID": 1014, "Name": "Laura", "Designation": "Developer", "Country": "England" },
        { "EmpID": 1015, "Name": "Carlos Hernandez", "Designation": "Developer", "Country": "Canada" },
        { "EmpID": 1016, "Name": "Lily", "Designation": "Product Manager", "Country": "France" },
        { "EmpID": 1017, "Name": "Tom Williams", "Designation": "Developer", "Country": "Ukraine" },
        { "EmpID": 1018, "Name": "Grace", "Designation": "Developer", "Country": "Australia" },
        { "EmpID": 1019, "Name": "Olivia", "Designation": "Team Lead", "Country": "Ireland" },
        { "EmpID": 1020, "Name": "James", "Designation": "Developer", "Country": "China" },
    ]; 
    // maps the appropriate column to fields property
    public fields: Object = { text: 'Name', value: 'EmpID' };
    public change = (args: ChangeEventArgs) => {
      // Your required action here
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

filtering

The filtering event is triggered when typing a character in the component.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { FormsModule, ReactiveFormsModule } from '@angular/forms'
import { MultiColumnComboBoxModule } from '@syncfusion/ej2-angular-multicolumn-combobox'
import { ButtonModule } from '@syncfusion/ej2-angular-buttons'



import { Component, HostListener, ViewChild } from '@angular/core';
import { FilteringEventArgs } from '@syncfusion/ej2-multicolumn-combobox';


@Component({
    imports: [ FormsModule, ReactiveFormsModule, MultiColumnComboBoxModule, ButtonModule ],
    standalone: true,
    selector: 'app-root',
    // specifies the template string for the MultiColumn ComboBox component with change event
    template: `<ejs-multicolumncombobox id='multicolumn' #multicolumn [dataSource]='empData' [fields]='fields' (filtering)='filtering($event)' width='500px' text='Michael'>
                  <e-columns>
                    <e-column field='EmpID' header='Employee ID' width='100'></e-column>
                    <e-column field='Name' header='Name' width='90'></e-column>
                    <e-column field='Designation' header='Designation' width='100'></e-column>
                    <e-column field='Country' header='Country' width='90'></e-column>
                  </e-columns>
                </ejs-multicolumncombobox>`
})
export class AppComponent {
    // defined the array of object data
    public empData: Object[] = [ 
        { "EmpID": 1001, "Name": "Andrew Fuller", "Designation": "Team Lead", "Country": "England" },
        { "EmpID": 1002, "Name": "Robert", "Designation": "Developer", "Country": "USA" },
        { "EmpID": 1003, "Name": "Michael", "Designation": "HR", "Country": "Russia" },
        { "EmpID": 1004, "Name": "Steven Buchanan", "Designation": "Product Manager", "Country": "Ukraine" },
        { "EmpID": 1005, "Name": "Margaret Peacock", "Designation": "Developer", "Country": "Egypt" },
        { "EmpID": 1006, "Name": "Janet Leverling", "Designation": "Team Lead", "Country": "Africa" },
        { "EmpID": 1007, "Name": "Alice", "Designation": "Product Manager", "Country": "Australia" },
        { "EmpID": 1008, "Name": "Bob", "Designation": "Developer", "Country": "India" },
        { "EmpID": 1009, "Name": "John", "Designation": "Product Manager", "Country": "Ireland"},
        { "EmpID": 1010, "Name": "Mario Pontes", "Designation": "Team Lead", "Country": "South Africa" },
        { "EmpID": 1011, "Name": "Yang Wang", "Designation": "Developer", "Country": "Russia" },
        { "EmpID": 1012, "Name": "David", "Designation": "Product Manager", "Country": "Egypt" },
        { "EmpID": 1013, "Name": "Antonio Bianchi", "Designation": "Team Lead", "Country": "USA" },
        { "EmpID": 1014, "Name": "Laura", "Designation": "Developer", "Country": "England" },
        { "EmpID": 1015, "Name": "Carlos Hernandez", "Designation": "Developer", "Country": "Canada" },
        { "EmpID": 1016, "Name": "Lily", "Designation": "Product Manager", "Country": "France" },
        { "EmpID": 1017, "Name": "Tom Williams", "Designation": "Developer", "Country": "Ukraine" },
        { "EmpID": 1018, "Name": "Grace", "Designation": "Developer", "Country": "Australia" },
        { "EmpID": 1019, "Name": "Olivia", "Designation": "Team Lead", "Country": "Ireland" },
        { "EmpID": 1020, "Name": "James", "Designation": "Developer", "Country": "China" },
    ]; 
    // maps the appropriate column to fields property
    public fields: Object = { text: 'Name', value: 'EmpID' };
    public filtering = (args: FilteringEventArgs) => {
      // Your required action here
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

open

The open event is triggered when the popup is opened.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { FormsModule, ReactiveFormsModule } from '@angular/forms'
import { MultiColumnComboBoxModule } from '@syncfusion/ej2-angular-multicolumn-combobox'
import { ButtonModule } from '@syncfusion/ej2-angular-buttons'



import { Component, HostListener, ViewChild } from '@angular/core';
import { PopupEventArgs } from '@syncfusion/ej2-multicolumn-combobox';


@Component({
    imports: [ FormsModule, ReactiveFormsModule, MultiColumnComboBoxModule, ButtonModule ],
    standalone: true,
    selector: 'app-root',
    // specifies the template string for the MultiColumn ComboBox component with change event
    template: `<ejs-multicolumncombobox id='multicolumn' #multicolumn [dataSource]='empData' [fields]='fields' (open)='open($event)' width='500px' text='Michael'>
                  <e-columns>
                    <e-column field='EmpID' header='Employee ID' width='100'></e-column>
                    <e-column field='Name' header='Name' width='90'></e-column>
                    <e-column field='Designation' header='Designation' width='100'></e-column>
                    <e-column field='Country' header='Country' width='90'></e-column>
                  </e-columns>
                </ejs-multicolumncombobox>`
})
export class AppComponent {
    // defined the array of object data
    public empData: Object[] = [ 
        { "EmpID": 1001, "Name": "Andrew Fuller", "Designation": "Team Lead", "Country": "England" },
        { "EmpID": 1002, "Name": "Robert", "Designation": "Developer", "Country": "USA" },
        { "EmpID": 1003, "Name": "Michael", "Designation": "HR", "Country": "Russia" },
        { "EmpID": 1004, "Name": "Steven Buchanan", "Designation": "Product Manager", "Country": "Ukraine" },
        { "EmpID": 1005, "Name": "Margaret Peacock", "Designation": "Developer", "Country": "Egypt" },
        { "EmpID": 1006, "Name": "Janet Leverling", "Designation": "Team Lead", "Country": "Africa" },
        { "EmpID": 1007, "Name": "Alice", "Designation": "Product Manager", "Country": "Australia" },
        { "EmpID": 1008, "Name": "Bob", "Designation": "Developer", "Country": "India" },
        { "EmpID": 1009, "Name": "John", "Designation": "Product Manager", "Country": "Ireland"},
        { "EmpID": 1010, "Name": "Mario Pontes", "Designation": "Team Lead", "Country": "South Africa" },
        { "EmpID": 1011, "Name": "Yang Wang", "Designation": "Developer", "Country": "Russia" },
        { "EmpID": 1012, "Name": "David", "Designation": "Product Manager", "Country": "Egypt" },
        { "EmpID": 1013, "Name": "Antonio Bianchi", "Designation": "Team Lead", "Country": "USA" },
        { "EmpID": 1014, "Name": "Laura", "Designation": "Developer", "Country": "England" },
        { "EmpID": 1015, "Name": "Carlos Hernandez", "Designation": "Developer", "Country": "Canada" },
        { "EmpID": 1016, "Name": "Lily", "Designation": "Product Manager", "Country": "France" },
        { "EmpID": 1017, "Name": "Tom Williams", "Designation": "Developer", "Country": "Ukraine" },
        { "EmpID": 1018, "Name": "Grace", "Designation": "Developer", "Country": "Australia" },
        { "EmpID": 1019, "Name": "Olivia", "Designation": "Team Lead", "Country": "Ireland" },
        { "EmpID": 1020, "Name": "James", "Designation": "Developer", "Country": "China" },
    ]; 
    // maps the appropriate column to fields property
    public fields: Object = { text: 'Name', value: 'EmpID' };
    public open = (args: PopupEventArgs) => {
      // Your required action here
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

close

The close event is triggered when the popup is closed.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { FormsModule, ReactiveFormsModule } from '@angular/forms'
import { MultiColumnComboBoxModule } from '@syncfusion/ej2-angular-multicolumn-combobox'
import { ButtonModule } from '@syncfusion/ej2-angular-buttons'



import { Component, HostListener, ViewChild } from '@angular/core';
import { PopupEventArgs } from '@syncfusion/ej2-multicolumn-combobox';


@Component({
    imports: [ FormsModule, ReactiveFormsModule, MultiColumnComboBoxModule, ButtonModule ],
    standalone: true,
    selector: 'app-root',
    // specifies the template string for the MultiColumn ComboBox component with change event
    template: `<ejs-multicolumncombobox id='multicolumn' #multicolumn [dataSource]='empData' [fields]='fields' (close)='close($event)' width='500px' text='Michael'>
                  <e-columns>
                    <e-column field='EmpID' header='Employee ID' width='100'></e-column>
                    <e-column field='Name' header='Name' width='90'></e-column>
                    <e-column field='Designation' header='Designation' width='100'></e-column>
                    <e-column field='Country' header='Country' width='90'></e-column>
                  </e-columns>
                </ejs-multicolumncombobox>`
})
export class AppComponent {
    // defined the array of object data
    public empData: Object[] = [ 
        { "EmpID": 1001, "Name": "Andrew Fuller", "Designation": "Team Lead", "Country": "England" },
        { "EmpID": 1002, "Name": "Robert", "Designation": "Developer", "Country": "USA" },
        { "EmpID": 1003, "Name": "Michael", "Designation": "HR", "Country": "Russia" },
        { "EmpID": 1004, "Name": "Steven Buchanan", "Designation": "Product Manager", "Country": "Ukraine" },
        { "EmpID": 1005, "Name": "Margaret Peacock", "Designation": "Developer", "Country": "Egypt" },
        { "EmpID": 1006, "Name": "Janet Leverling", "Designation": "Team Lead", "Country": "Africa" },
        { "EmpID": 1007, "Name": "Alice", "Designation": "Product Manager", "Country": "Australia" },
        { "EmpID": 1008, "Name": "Bob", "Designation": "Developer", "Country": "India" },
        { "EmpID": 1009, "Name": "John", "Designation": "Product Manager", "Country": "Ireland"},
        { "EmpID": 1010, "Name": "Mario Pontes", "Designation": "Team Lead", "Country": "South Africa" },
        { "EmpID": 1011, "Name": "Yang Wang", "Designation": "Developer", "Country": "Russia" },
        { "EmpID": 1012, "Name": "David", "Designation": "Product Manager", "Country": "Egypt" },
        { "EmpID": 1013, "Name": "Antonio Bianchi", "Designation": "Team Lead", "Country": "USA" },
        { "EmpID": 1014, "Name": "Laura", "Designation": "Developer", "Country": "England" },
        { "EmpID": 1015, "Name": "Carlos Hernandez", "Designation": "Developer", "Country": "Canada" },
        { "EmpID": 1016, "Name": "Lily", "Designation": "Product Manager", "Country": "France" },
        { "EmpID": 1017, "Name": "Tom Williams", "Designation": "Developer", "Country": "Ukraine" },
        { "EmpID": 1018, "Name": "Grace", "Designation": "Developer", "Country": "Australia" },
        { "EmpID": 1019, "Name": "Olivia", "Designation": "Team Lead", "Country": "Ireland" },
        { "EmpID": 1020, "Name": "James", "Designation": "Developer", "Country": "China" },
    ]; 
    // maps the appropriate column to fields property
    public fields: Object = { text: 'Name', value: 'EmpID' };
    public close = (args: PopupEventArgs) => {
      // Your required action here
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));