Remove item in Angular Drop down list component
15 Sep 20225 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.
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);