Search results

Add item in between in DropDownList in Angular DropDownList component

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.

The following example demonstrate how to add item in between in DropDownList.

Source
Preview
app.component.ts
app.module.ts
main.ts
add.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: `./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>