Search results

Clear the selected item in DropDownList in Angular DropDownList component

09 Jun 2021 / 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.

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

    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';
    public dropDownListObject: DropDownListComponent;
Copied to clipboard
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
    imports: [
        BrowserModule,FormsModule, DropDownListModule
    declarations: [AppComponent],
    bootstrap: [AppComponent]
export class AppModule { }
Copied to clipboard
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

Copied to clipboard
<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>