How to clear the selected item in Angular Dropdown List

31 Aug 20263 minutes to read

You can clear the selected item in the following two ways.

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

Programmatically you can set null value to any one of the index, text, or value properties to clear the selected item in DropDownList.

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

clear.html

<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>

app.ts

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { FormsModule } from '@angular/forms'
import { DropDownListModule } from '@syncfusion/ej2-angular-dropdowns'



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

@Component({
imports: [
        FormsModule, DropDownListModule
    ],


standalone: true,
    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 as any).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;
}

main.ts

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