How to add item in between in Angular Dropdown List

31 Aug 20264 minutes to read

You can add an item in between based on item index. If you add new item an without item index, it will be added as last item in list.

To get started quickly with adding items in the Angular DropDownList component, you can check the video below.

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

app.ts

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { FormsModule } from '@angular/forms'
import { DropDownListModule } from '@syncfusion/ej2-angular-dropdowns'



import { Component, ViewChild } from '@angular/core';
import { DropDownListComponent } from '@syncfusion/ej2-angular-dropdowns';

@Component({
imports: [
        FormsModule, DropDownListModule
    ],


standalone: true,
    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;
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));