Search results

Remove an item from DropDownList in Angular DropDownList component

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

Source
Preview
app.component.ts
app.module.ts
main.ts
remove.html
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;

}
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' [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>