We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

data not show ng-template in ejs-dropdownlist


data not show ng-template in ejs-dropdownlist look my code and image view

import { Component, OnInit, Input, ViewEncapsulation, Output, ViewChild } from '@angular/core';
import { Query, DataManager, WebApiAdaptor} from '@syncfusion/ej2-data';
import { DropDownListComponent } from '@syncfusion/ej2-angular-dropdowns';
import { EmitType } from '@syncfusion/ej2-base';
import { FilteringEventArgs, highlightSearch} from '@syncfusion/ej2-dropdowns';
import { FormBuilder, FormGroup, FormControl, Validators, FormsModule} from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';

selector: 'kt-docselect',
templateUrl: './docselect.component.html',
styleUrls: ['./docselect.component.scss'],
encapsulation: ViewEncapsulation.None
export class DocselectComponent implements OnInit {
invDetailForm: FormGroup;
fb: FormBuilder;
@ViewChild('element') element;

constructor(private builder: FormBuilder) {
this.fb = builder;
createForm() :void {
this.invDetailForm = this.fb.group({
docName: ['', Validators.required]

public datatest: DataManager = new DataManager({
url: 'https://ej2services.syncfusion.com/production/web-services/api/Orders',
adaptor: new WebApiAdaptor,
crossDomain: true

// bind the Query instance to query property
public query: Query = new Query().select(['ShipName', 'EmployeeID']).take(10).requiresCount();

// maps the remote data column to fields property
public remoteFields: Object = {
text: 'ShipName', value: 'EmployeeID', itemCreated: (e: any) => {
highlightSearch(e.item, this.queryString, true, 'StartsWith');

//sort the result items
public sorting: string = 'Ascending';
public queryString: string;

// set the height of the popup element
public height: string = '200px';

// set the placeholder to DropDownList input element
public remoteWaterMark: string = 'Select a name';

public onFiltering: EmitType<FilteringEventArgs> = (e: FilteringEventArgs) => {
// load overall data when search key empty.
if (e.text === '') {
} else {
// restrict the remote request until search key contains 3 characters.
if (e.text.length < 3) { return; }
let query: Query = new Query().select(['ShipName', 'EmployeeID']);
query = (e.text !== '') ? query.where('ShipName', 'startswith', e.text, true) : query;
e.updateData(this.datatest, query);

ngOnInit() {



<div class="box-form">
<form [formGroup]="invDetailForm" novalidate id="formId">
<ejs-dropdownlist formControlName="docName" id='dropdownlist-template' [dataSource]='datatest' [fields]='remoteFields' [query]='query' [popupHeight]='height' [placeholder]='remoteWaterMark' [allowFiltering]='true' [sortOrder]='sorting' (filtering)='onFiltering($event)' [itemTemplate]='itemTemplate' floatLabelType='Auto'>
<!-- <ng-template #headerTemplate>
<div class="head"> <span class="photo">Photo</span> <span style="margin-left:17px;">Employee Info</span></div>
</ng-template> -->
<ng-template #itemTemplate="" let-datatest>
<!-- <img class="empImage" src="./assets/auto-complete/Employees/{{data.Eimg}}.png" alt="employee" /> -->
<p><span>{{datatest.ShipAddress}}</span> -- <span>{{datatest.ShipCity}}</span> -- <span>{{data.OrderDate}}</span></p>
<p><span>{{datatest.ShipCity}}</span> -- <span>{{datatest.OrderDate}}</span></p>
<!-- <ng-template #valueTemplate let-data>
<div><img class="valueTemp" src="./assets/auto-complete/Employees/{{data.Eimg}}.png" height="26px" width="26px" alt="employee" />
<div class="name"> {{data.Name}} </div>
</ng-template> -->


2 Replies

AB Ashokkumar Balasubramanian Syncfusion Team August 5, 2019 11:36 AM UTC

Hi Rizwan, 
Good day to you. 
Query 1: Data does not show. 
We have checked your provided code block and reported problem at our end. The reported problem due to on improperly mapping the field values in template. Could you please ensure this case at your end? 
For your reference, we have prepared the sample, please find it below. 
Query2: highlight search is not working. 
We do not have in build support for highlight search functionality in Dropdown List. We will check the possibilities of achieving your requirement and revert to us within two business days. 
Ashokkumar B. 

AB Ashokkumar Balasubramanian Syncfusion Team August 7, 2019 05:15 PM UTC

Hi Rizwan, 
Query2: highlight search is not working. 
Thanks for your patience. 
We have highlighted the text in the template sample. In the webapi adaptor order there is no filtering support, but this can be achieved through filtering. So, we have prepared sample using employees table and basically template will be rendered with delay, so, to get the item created element we have used set timeout. 
Please check the sample and get back to us if you need any further assistance 
Ashokkumar B. 

Live Chat Icon For mobile
Up arrow icon