Blazor Ebook
A quick guide to getting started with learning and improving your skills using Blazor technology.
You can add item in between based on item index.
If you add new item without item index, item will be added as last item in list.
To get started quickly with adding items in angular DropDownList component, you can check the video below.
The following example demonstrate how to add item in between in 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: `./add.html`
})
export class AppComponent {
constructor() {
}
ngAfterViewInit() {
// add item at first
document.getElementById('first').onclick = () => {
this.dropDownListObject.addItem({Id: 'game0', Game: 'Hockey'}, 0);
}
// add item in between
document.getElementById('between').onclick = () => {
this.dropDownListObject.addItem({Id: 'game4', Game: 'Golf'}, 2);
}
// add item at last
document.getElementById('last').onclick = () => {
this.dropDownListObject.addItem({Id: 'game5', Game: 'Cricket'});
}
}
// 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='first' #first class="e-control e-btn"> add item (Hockey) in first</button>
</div>
<div style='padding-left: 50px 0'>
<button ej-button id='between' #between class="e-control e-btn"> add item (Golf) in between</button>
</div>
<div style='padding: 50px 0'>
<button ej-button id='last' #last class="e-control e-btn"> add item (Cricket) in last</button>
</div>
</div>
</div>
</div>
</div>