Blazor Ebook
A quick guide to getting started with learning and improving your skills using Blazor technology.
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);<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>