Modify data in Angular Drop down list component
27 Apr 20243 minutes to read
When binding the remote data source, by using the actionComplete
event, you can modify the result data before passing it to DropDownList.
The following sample demonstrate how to modify the result data.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { FormsModule, ReactiveFormsModule } from '@angular/forms'
import { DropDownListModule } from '@syncfusion/ej2-angular-dropdowns'
import { ButtonModule } from '@syncfusion/ej2-angular-buttons'
import { Component } from '@angular/core';
import { Query, DataManager, ODataV4Adaptor } from '@syncfusion/ej2-data'
@Component({
imports: [
FormsModule, ReactiveFormsModule, DropDownListModule, ButtonModule
],
standalone: true,
selector: 'app-root',
// specifies the template string for the DropDownList component with change event
template: `<ejs-dropdownlist id='ddlelement' #samples [dataSource]='data' [fields]='fields' [placeholder]='text' [query]='query' [sortOrder]='sorting' (actionComplete)="actionComplete($event)"></ejs-dropdownlist>`
})
export class AppComponent {
constructor() {
}
//bind the DataManager instance to dataSource property
public data: DataManager = new DataManager({
url: 'https://services.odata.org/V4/Northwind/Northwind.svc/',
adaptor: new ODataV4Adaptor,
crossDomain: true
});
// maps the appropriate column to fields property
public fields: Object = { text: 'ContactName', value: 'CustomerID' };
//bind the Query instance to query property
public query: Query = new Query().from('Customers').select(['ContactName', 'CustomerID']).take(6);
//set the placeholder to DropDownList input
public text: string = "Select a customer";
//sort the result items
public sorting: string = 'Ascending';
public actionComplete(e: any): void {
// initially result contains 6 items
console.log("Before modified the result: " + e.result.length);
// remove first 2 items from result.
e.result.splice(0, 2);
// now displays the result count is 4.
console.log("After modified the result: " + e.result.length);
}
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));