Clear the selected item in DropDownList in Angular DropDownList component

21 Dec 2022 / 2 minutes to read

You can clear the selected item in the below two different ways.

By clicking on the clear icon which is shown in DropDownList element, you can clear the selected item in DropDownList through interaction. By using showClearButton property, you can enable the clear icon in DropDownList element.

Through programmatic you can set null value to anyone of the index, text or value property to clear the selected item in DropDownList.

The following example demonstrate about how to clear the selected item in DropDownList.

Source

Preview

app.component.ts

app.module.ts

main.ts

clear.html

import { Component, ViewChild } from '@angular/core';
import { DropDownListComponent } from '@syncfusion/ej2-angular-dropdowns';
import { Button } from '@syncfusion/ej2-buttons';

@Component({
    selector: 'control-content',
    // specifies the template string for the DropDownList component with change event
    templateUrl: `./clear.html`
})
export class AppComponent {
    constructor() {
    }
    ngAfterViewInit() {
      // Set null value to value property for clear the selected item
        document.getElementById('btn').onclick = () => {
          this.dropDownListObject.value = null;
        }
    }
    // defined the array of data
    public data: string[] = ['Badminton', 'Basketball', 'Cricket', 'Golf', 'Hockey', 'Rugby'];
    // set placeholder text to DropDownList input element
    public placeholder: string = 'Select a game';
     @ViewChild('ddlelement')
    public dropDownListObject: DropDownListComponent;
}

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { DropDownListModule } from '@syncfusion/ej2-angular-dropdowns';
/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,FormsModule, DropDownListModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

<div class="control-section">
    <div class="content-wrapper"> 
        <div id='icon'>
            <div class="content" style="margin: 50px auto 0; width:250px;">
			    <ejs-dropdownlist id='ddlelement' #ddlelement [dataSource]='data' [placeholder]='placeholder'></ejs-dropdownlist>
                <div style='padding: 50px 0'>
					<button id='btn' #btn class="e-control e-btn"> Set null to value property</button>
				</div>
            </div>
        </div>
    </div>
</div>