Before component rendering, you can get the total items count by using
actionComplete
event with its result arguments.
After rendering this component, you can get the total items count by using getItems method.
The following example demonstrate how to get the total items count.
import { Component, ViewChild } from '@angular/core';
import { DropDownListComponent } from '@syncfusion/ej2-angular-dropdowns';
import { Query, DataManager, ODataV4Adaptor } from '@syncfusion/ej2-data'
@Component({
selector: 'control-content',
// specifies the template path for DropDownList component
templateUrl: `template.html`
})
export class AppComponent {
@ViewChild('sample')
public dropDownListObject = DropDownListComponent;
constructor() {
}
ngAfterViewInit(){
let proxy=this;
document.getElementById('btn').onclick = () => {
// get items count using getItems method
console.log("Total items count: " + proxy.dropDownListObject.getItems().length);
let element: HTMLElement = document.createElement('p');
element.innerText = "Total items count: " + proxy.dropDownListObject.getItems().length;
document.getElementById('event').append(element);
}
}
//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 {
// get total items count
console.log("Total items count: " + e.result.length);
let element: HTMLElement = document.createElement('p');
element.innerText = "Total items count: " + e.result.length;
document.getElementById('event').append(element);
}
}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' #sample [dataSource]='data' [fields]='fields' [placeholder]='text' [query]='query'
[sortOrder]='sorting' (actionComplete)="actionComplete($event)"></ejs-dropdownlist>
<div style='padding: 50px 0'>
<button ej-button id='btn' #btn class="e-control e-btn"> Get Item Count </button>
</div>
<p id='event'> </p>
</div>
</div>
</div>
</div>