HelpBot Assistant

How can I help you?

Getting started with Angular ComboBox component

10 Feb 202615 minutes to read

This guide demonstrates how to set up and configure the Syncfusion Angular ComboBox component, from initial installation through enabling core features like data binding and custom values. The ComboBox component allows users to select a value from a predefined list or enter a custom value, providing flexibility for single-item selection scenarios.

Note: This guide supports Angular 21 and other recent Angular versions. For detailed compatibility with other Angular versions, please refer to the Angular version support matrix. Starting from Angular 19, standalone components are the default, and this guide reflects that architecture.

Ready to streamline your Syncfusion^® Angular development? Discover the full potential of Syncfusion^® Angular components with Syncfusion^® AI Coding Assistant. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, Syncfusion^® CodeStudio and more. Explore Syncfusion^® AI Coding Assistant

To get started quickly with Angular ComboBox component using CLI and Schematics, you can check on this video:

Prerequisites

Ensure your development environment meets the System Requirements for Syncfusion Angular UI Components.

Dependencies

The following dependencies are required to use the Angular ComboBox component in your application.

|-- @syncfusion/ej2-angular-dropdowns
    |-- @syncfusion/ej2-base
    |-- @syncfusion/ej2-data
    |-- @syncfusion/ej2-angular-base
    |-- @syncfusion/ej2-dropdowns
        |-- @syncfusion/ej2-lists
        |-- @syncfusion/ej2-inputs
        |-- @syncfusion/ej2-navigations
        |-- @syncfusion/ej2-notifications
        |-- @syncfusion/ej2-popups
            |-- @syncfusion/ej2-buttons

SetUp the Angular application

A straightforward approach to beginning with Angular is to create a new application using the Angular CLI. Install Angular CLI globally with the following command:

npm install -g @angular/cli

Angular 21 Standalone Architecture: Standalone components are the default in Angular 21. This guide uses the modern standalone architecture. If you need more information about the standalone architecture, refer to the Standalone Guide.

Installing a specific version

To install a particular version of Angular CLI, use:

npm install -g @angular/[email protected]

Create a new application

With Angular CLI installed, execute this command to generate a new application:

ng new syncfusion-angular-app

This command will prompt you to configure settings like enabling Angular routing and choosing a stylesheet format.

? Which stylesheet format would you like to use? (Use arrow keys)
> CSS             [ https://developer.mozilla.org/docs/Web/CSS                     ]
  Sass (SCSS)     [ https://sass-lang.com/documentation/syntax#scss                ]
  Sass (Indented) [ https://sass-lang.com/documentation/syntax#the-indented-syntax ]
  Less            [ http://lesscss.org                                             ]

By default, a CSS-based application is created. Use SCSS if required:

ng new syncfusion-angular-app --style=scss

During project setup, when prompted for the Server-side rendering (SSR) option, choose the appropriate configuration.

Initial_setup

Select the required AI tool or ‘none’ if you do not need any AI tool.

Initial_setup

Navigate to your newly created application directory:

cd syncfusion-angular-app

Note: In Angular 19 and below, it uses app.component.ts, app.component.html, app.component.css etc. In Angular 20+, the CLI generates a simpler structure with src/app/app.ts, app.html, and app.css (no .component. suffixes).

Adding Syncfusion^® Angular packages

Syncfusion^®’s Angular component packages are available on npmjs.com. To use Syncfusion^® Angular components, install the necessary package.

This guide uses the Angular ComboBox component for demonstration. Add the Angular ComboBox component component with:

ng add @syncfusion/ej2-angular-dropdowns

This command will perform the following configurations:

Add the @syncfusion/ej2-angular-dropdowns package and peer dependencies to your package.json.
Import the ComboBox component component in your application.
Register the default Syncfusion^® Material theme in angular.json.

For more details on version compatibility, refer to the Version Compatibility section.

Syncfusion^® offers two package structures for Angular components:

Ivy library distribution package format
Angular compatibility compiler (ngcc), which is Angular’s legacy compilation pipeline.
Syncfusion^®’s latest Angular packages are provided as Ivy-compatible and suited for Angular 12 and above. To install the package, execute:
```
ng add @syncfusion/ej2-angular-dropdowns
```
For applications not compiled with Ivy, use the ngcc tagged packages:
The ngcc packages are still compatible with Angular CLI versions 15 and below. However, they may generate warnings suggesting the use of IVY compiled packages. Starting from Angular 16, support for the ngcc package has been completely removed. If you have further questions regarding ngcc compatibility, please refer to the following FAQ.
```
npm add @syncfusion/[email protected]
```

Import Syncfusion^® CSS styles

Syncfusion^® Angular component themes can be added in various ways: via CSS or SCSS styles from npm packages, CDN, CRG, or Theme Studio.

The Material theme is added to your styles.css when you run ng add (this happens automatically by default).

To stylize only specific Syncfusion^® components, import the necessary styles. For example, to style only the ComboBox component:

@import '../node_modules/@syncfusion/ej2-base/styles/material.css';  
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';  
@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';  
@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';  
@import '../node_modules/@syncfusion/ej2-lists/styles/material.css';  
@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
@import '../node_modules/@syncfusion/ej2-angular-dropdowns/styles/material.css';

Ensure that the import order aligns with the component’s dependency sequence.

For using SCSS styles, refer to this guide.

Add ComboBox component

Modify the template in [src/app/app.ts] file to render the ComboBox component.
Add the Angular ComboBox by using <ejs-combobox> selector in template section of the app.ts file.

import { Component, OnInit } from '@angular/core';
import { ComboBoxModule } from '@syncfusion/ej2-angular-dropdowns'

@Component({
    imports: [
      ComboBoxModule
    ],
    standalone: true,
    selector: 'app-root',
    // specifies the template string for the ComboBox component
    template: `<ejs-combobox></ejs-combobox>`
})
export class AppComponent implements OnInit {

    ngOnInit(): void {
    }
}

Binding data source

Bind data to the ComboBox component using the dataSource property. The property accepts either an array of JavaScript objects or a DataManager instance.

import { Component, OnInit } from '@angular/core';
import { ComboBoxModule } from '@syncfusion/ej2-angular-dropdowns'

@Component({
    imports: [
      ComboBoxModule
    ],
    standalone: true,
    selector: 'app-root',
    // specifies the template string for the ComboBox component
    template: `<ejs-combobox id='comboelement' [dataSource]='data'></ejs-combobox>`
})
export class AppComponent implements OnInit {
  public data: string[] = [];
  ngOnInit(): void {
    this.data = ['Cricket', 'Football', 'Rugby', 'Snooker', 'Tennis'];
  }
}

Running the application

After completing the configuration required to render a basic ComboBox, run the following command to display the output in your default browser:

ng serve

The following example illustrates the output in your browser.

app.ts
main.ts
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { FormsModule, ReactiveFormsModule } from '@angular/forms'
import { ComboBoxModule } from '@syncfusion/ej2-angular-dropdowns'
import { ButtonModule } from '@syncfusion/ej2-angular-buttons'



import { Component } from '@angular/core';

@Component({
imports: [
        FormsModule, ReactiveFormsModule, ComboBoxModule,ButtonModule
    ],


standalone: true,
    selector: 'app-root',
    // specifies the template string for the ComboBox component with dataSource
    template: `<ejs-combobox id='comboelement' [dataSource]='data' placeholder = 'Select a game'></ejs-combobox>`
})
export class AppComponent {
    constructor() {
    }
    // defined the array of data
    public data: string[] = ['Cricket', 'Football', 'Rugby', 'Snooker', 'Tennis'];
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Custom values

The ComboBox allows users to enter custom values that are not present in the predefined set of values. By default, this functionality is enabled through the allowCustom property. In this case, the text field and value field are considered the same. The custom value will be submitted with the form data when the form is submitted.

app.ts
main.ts
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { FormsModule, ReactiveFormsModule } from '@angular/forms'
import { ComboBoxModule } from '@syncfusion/ej2-angular-dropdowns'
import { ButtonModule } from '@syncfusion/ej2-angular-buttons'



import { Component } from '@angular/core';

@Component({
imports: [
        FormsModule, ReactiveFormsModule, ComboBoxModule,ButtonModule
    ],


standalone: true,
    selector: 'app-root',
    // specifies the template string for the ComboBox component with dataSource
    template: `<ejs-combobox id='comboelement' [dataSource]='sportsData' [fields]=fields allowCustom=true placeholder = 'Select a game'></ejs-combobox>`
})
export class AppComponent {
    constructor() {
    }
    public fields: Object = {text: 'Game', value: 'Id'};
    // defined the array of data
    public sportsData: { [key: string]: Object }[] = [
        { Id: 'game1', Game: 'Badminton' },
        { Id: 'game2', Game: 'Football' },
        { Id: 'game3', Game: 'Tennis' }
    ];
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

By default, the width of the popup list automatically adjusts to match the ComboBox input element’s width, and the height defaults to 300px.

The height and width of the popup list can be customized using the popupHeight and popupWidth properties.

In the following sample, the popup list’s width and height are configured.

app.ts
main.ts
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { FormsModule, ReactiveFormsModule } from '@angular/forms'
import { ComboBoxModule } from '@syncfusion/ej2-angular-dropdowns'
import { ButtonModule } from '@syncfusion/ej2-angular-buttons'



import { Component } from '@angular/core';

@Component({
imports: [
        FormsModule, ReactiveFormsModule, ComboBoxModule,ButtonModule
    ],


standalone: true,
    selector: 'app-root',
    // specifies the template string for the ComboBox component with value property
    template: `<ejs-combobox id='comboelement' #samples [dataSource]='data' placeholder='Select a game' popupHeight='200px' popupWidth='250px'></ejs-combobox>`
})
export class AppComponent {
    constructor() {
    }
    // define the array of data
    public data: string[] = ['Cricket', 'Football', 'Golf', 'Rugby', 'Snooker', 'Tennis'];
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Two-way binding

In ComboBox, the value property supports two-way binding functionality. The following example demonstrates how to use two-way binding in the ComboBox component.

app.ts
main.ts
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { FormsModule, ReactiveFormsModule } from '@angular/forms'
import { ComboBoxModule } from '@syncfusion/ej2-angular-dropdowns'
import { ButtonModule } from '@syncfusion/ej2-angular-buttons'



import { Component } from '@angular/core';

@Component({
imports: [
        FormsModule, ReactiveFormsModule, ComboBoxModule,ButtonModule
    ],


standalone: true,
    selector: 'app-root',
    // specifies the template string for the ComboBox component and
    // input element for checking the two-way binding support using value property
    template: `
    <ejs-combobox id='comboelement' [dataSource]='data' [(value)]='value' placeholder="Select a game"></ejs-combobox>
    <div style='margin-top: 50px'>
        <input type="text" [(ngModel)]="value" style='width:245px;height:25px' />
     </div>
    `
})
export class AppComponent {
    constructor() {
    }
    // defined the array of complex data
    public data: string[] = [ 'Badminton', 'Football', 'Rugby', 'Snooker', 'Tennis' ];
    // set a value to pre-select
    public value: string = 'Badminton';
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

You can refer to our Angular ComboBox feature tour page for its groundbreaking feature representations. You can also explore our Angular ComboBox example that shows how to render the ComboBox in Angular.

Search docs

Ask HelpBot

Search docs

Ask HelpBot

How can I help you?

Getting started with Angular ComboBox component

Prerequisites

Dependencies

SetUp the Angular application

Installing a specific version

Create a new application

Adding Syncfusion^® Angular packages

Import Syncfusion^® CSS styles

Add ComboBox component

Binding data source

Running the application

Custom values

Two-way binding

See Also

How can I help you?

Getting started with Angular ComboBox component

Prerequisites

Dependencies

SetUp the Angular application

Installing a specific version

Create a new application

Adding Syncfusion® Angular packages

Import Syncfusion® CSS styles

Add ComboBox component

Binding data source

Running the application

Custom values

Configure the popup list

Two-way binding

See Also

Adding Syncfusion^® Angular packages

Import Syncfusion^® CSS styles