How to enable autofill in Angular ComboBox

25 Sep 20261 minute to read

The Angular ComboBox supports the autofill behavior with the help of autofill property. Whenever you change the input value, the Angular ComboBox will autocomplete your data by matching the typed character. Suppose, if no matches found then, Angular ComboBox doesn’t suggest any item.

The following examples, showcase that how to work autofill with Angular ComboBox.

app.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 enable the autofill in ComboBox component
    template: `<ejs-combobox id='comboelement' #samples [dataSource]='data' [autofill]='true' [placeholder]='text'></ejs-combobox>`
})
export class AppComponent {
    constructor() {
    }
    // defined the array of data
    public data: string[] = ['Badminton', 'Basketball', 'Cricket', 'Golf', 'Hockey', 'Rugby'];
    // set placeholder text to ComboBox input element
    public text: string = 'Select a game';
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
bootstrapApplication(AppComponent).catch((err) => console.error(err));