Search results

Remove an item from DropDownList in Angular DropDownList component

24 Jun 2022 / 2 minutes to read

To get started quickly with removing items in angular DropDownList component, you can check the video below.

The following example demonstrate about how to remove an item from DropDownList.

Source
Preview
app.component.ts
app.module.ts
main.ts
remove.html
Copied to clipboard
import { Component, ViewChild } from '@angular/core';
import { DropDownListComponent } from '@syncfusion/ej2-angular-dropdowns';

@Component({
    selector: 'control-content',
    // specifies the template path for DropDownList component
    templateUrl: `./remove.html`
})
export class AppComponent {
    constructor() {
    }
    ngAfterViewInit(){
        document.getElementById('btn').onclick = () => {
            // create DropDownList object
            let obj: any = document.getElementById('ddlelement');
            if (obj.ej2_instances[0].list) {
                // Remove the selected value if 0th index selected
                if (this.dropDownListObject.index === 0) {
                    this.dropDownListObject.value = null;
                    this.dropDownListObject.dataBind();
                }
                // remove first item in list
                (obj.ej2_instances[0].list.querySelectorAll('li')[0]).remove();
                if (!obj.ej2_instances[0].list.querySelectorAll('li')[0]) {
                    this.dropDownListObject.dataSource = [];
                    // enable the nodata template when no data source is empty.
                    obj.ej2_instances[0].list.classList.add('e-nodata');
                }
            } else {
                // remove first item in list
                this.dropDownListObject.dataSource.splice(0, 1);
            }
        }
    }
    // defined the array of data
    public data: { [key: string]: Object }[] = [ { Id: 'game1', Game: 'Badminton' },
                 { Id: 'game2', Game: 'Football' }, { Id: 'game3', Game: 'Tennis' }];
    // maps the appropriate column to fields property
    public fields: Object = { text: 'Game', value: 'Id' };
    //set the placeholder to DropDownList input
    public text: string = "Select a game";
    @ViewChild('ddlelement')
    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
 */
@NgModule({
    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';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
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' [fields]='fields' [placeholder]='text'></ejs-dropdownlist>
                <div style='padding: 50px 0'>
					<button ej-button id='btn' #btn class="e-control e-btn"> Remove 0th item </button>
				</div>
            </div>
        </div>
    </div>
</div>