Add item in Angular Drop down list component

23 Jan 20244 minutes to read

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.

app.component.ts

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 as any).addItem({Id: 'game0', Game: 'Hockey'}, 0);
        }

        // add item in between
        document.getElementById('between')!.onclick = () => {
            (this.dropDownListObject as any).addItem({Id: 'game4', Game: 'Golf'}, 2);
        }

        // add item at last
        document.getElementById('last')!.onclick = () => {
            (this.dropDownListObject as any).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;
}

app.module.ts

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 { }

main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

import 'zone.js';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);