Template and Multilevel Nesting in Angular Context Menu

31 Aug 202624 minutes to read

Item template

The itemTemplate property in the ContextMenu component allows you to define custom templates for displaying menu items. This feature enables you to customize the appearance, layout, and content of menu items beyond the default text-based display. Use item templates when you need to include icons, formatted text, additional metadata, or complex HTML structures within menu items.

The following sample uses an <ng-template> reference (#itemTemplate) inside the component template, and binds it to the ContextMenu via the [itemTemplate] property. The template exposes the data of each menu item through the implicit let-data variable.

app.component.ts:

app.ts
app.html
main.ts
import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
import { Browser } from '@syncfusion/ej2-base';
import { ContextMenuComponent, ContextMenuModule, BeforeOpenCloseMenuEventArgs } from '@syncfusion/ej2-angular-navigations';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['styles.css'],
  encapsulation: ViewEncapsulation.None,
  standalone: true,
  imports: [ContextMenuModule]
})

export class AppComponent {
  public content: string = '';

  @ViewChild('contextmenu')
  public contextmenu!: ContextMenuComponent;

  public data: any = [
    {
      answerType: 'Selection',
      description: 'Choose from options',
      iconCss: 'e-icons e-list-unordered',
    },
    {
      answerType: 'Yes / No',
      description: 'Select Yes or No',
      iconCss: 'e-icons e-check-box',
    },
    {
      answerType: 'Text',
      description: 'Type own answer',
      iconCss: 'e-icons e-caption',
      items: [
        {
          answerType: 'Single line',
          description: 'Type answer in a single line',
          iconCss: 'e-icons e-text-form',
        },
        {
          answerType: 'Multiple line',
          description: 'Type answer in multiple line',
          iconCss: 'e-icons e-text-wrap',
        },
      ],
    },
    {
      answerType: 'None',
      description: 'No answer required',
      iconCss: 'e-icons e-mouse-pointer',
    },
  ];

  onCreated(): void {
    if (Browser.isDevice) {
      this.content = 'Touch hold to open the Context Menu';
      this.contextmenu.animationSettings.effect = 'ZoomIn';
    } else {
      this.content = 'Right click/Touch hold to open the Context Menu';
      this.contextmenu.animationSettings.effect = 'SlideDown';
    }
  }

  addTemplateClass(args: BeforeOpenCloseMenuEventArgs): void {
    if (args.element.classList.contains('e-ul')) {
      args.element.classList.add('e-contextMenu-template');
    }
  }
}
```html
<div class="control-section">
    <div class="contextmenu-control">
        <div id="contextmenutarget"><h1 id="templates-in-angular-dropdown-list">Templates in Angular Dropdown List</h1>

<p>The DropDownList has been provided with several options to customize each list item, group title, selected value, header, and footer elements.</p>

<p>To get started quickly with templates in Angular DropDownList component, you can check the video below.</p>

<style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style>
<div class="embed-container">    <iframe title="YouTube video player" width="640" height="390" src="//www.youtube.com/embed/Uth3NvzdgdU" frameborder="0" allowfullscreen=""></iframe>
</div>

<h2 id="item-template">Item template</h2>

<p>The content of each list item within the DropDownList can be customized with the help of <a href="https://ej2.syncfusion.com/angular/documentation/api/drop-down-list#itemtemplate">itemTemplate</a> property.</p>

<p>In the following sample, each list item is split into two columns to display relevant data.</p>

<div class="tabs" id="code-snippet-1">

<ul class="nav nav-tabs" role="tablist">

<li role="presentation" class=""><a data-target="#fhhg6t5xh108xma40nrta90bhig7drkd-ts" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="app.ts" data-original-lang="ts">app.ts</a></li>
<li role="presentation" class=""><a data-target="#hxtxeoo6kpex47o1va2c52lzgm2u0oi8-ts" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="main.ts" data-original-lang="ts">main.ts</a></li>
<li role="presentation" class=""><a data-target="#ndgqf7jq3hv2wbo62xv84l8qir6cu0f7-ts" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="template.html" data-original-lang="ts">template.html</a></li>

</ul>

<div class="tab-content">


<div role="tabpanel" class="tab-pane" id="fhhg6t5xh108xma40nrta90bhig7drkd-ts" data-original-lang="ts">
<div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="k">import</span> <span class="p">{</span> <span class="nx">NgModule</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@angular/core'</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">BrowserModule</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@angular/platform-browser'</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">FormsModule</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@angular/forms'</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">DropDownListModule</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-angular-dropdowns'</span>



<span class="k">import</span> <span class="p">{</span> <span class="nx">Component</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@angular/core'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">Query</span><span class="p">,</span> <span class="nx">DataManager</span><span class="p">,</span> <span class="nx">ODataV4Adaptor</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-data'</span>

<span class="kd">@Component</span><span class="p">({</span>
<span class="nx">imports</span><span class="o">:</span> <span class="p">[</span>
        <span class="nx">FormsModule</span><span class="p">,</span><span class="nx">DropDownListModule</span>
    <span class="p">],</span>


<span class="nx">standalone</span>: <span class="kt">true</span><span class="p">,</span>
    <span class="nx">selector</span><span class="o">:</span> <span class="s1">'app-root'</span><span class="p">,</span>
    <span class="c1">// specifies the template url path</span>
    <span class="nx">templateUrl</span><span class="o">:</span> <span class="s1">'template.html'</span>
<span class="p">})</span>
<span class="k">export</span> <span class="kd">class</span> <span class="nx">AppComponent</span> <span class="p">{</span>
<span class="nx">height</span>: <span class="kt">any</span><span class="p">;</span>
    <span class="kr">constructor</span><span class="p">()</span> <span class="p">{</span>
    <span class="p">}</span>
    <span class="c1">//bind the DataManager instance to dataSource property</span>
    <span class="k">public</span> <span class="nx">data</span>: <span class="kt">DataManager</span> <span class="o">=</span> <span class="ow">new</span> <span class="nx">DataManager</span><span class="p">({</span>
            <span class="nx">url</span><span class="o">:</span> <span class="s1">'https://services.odata.org/V4/Northwind/Northwind.svc/'</span><span class="p">,</span>
            <span class="nx">adaptor</span>: <span class="kt">new</span> <span class="nx">ODataV4Adaptor</span><span class="p">,</span>
            <span class="nx">crossDomain</span>: <span class="kt">true</span>
        <span class="p">});</span>
    <span class="c1">// maps the appropriate column to fields property</span>
    <span class="k">public</span> <span class="nx">fields</span>: <span class="kt">Object</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">text</span><span class="o">:</span> <span class="s1">'FirstName'</span><span class="p">,</span> <span class="nx">value</span><span class="o">:</span> <span class="s1">'EmployeeID'</span> <span class="p">};</span>
    <span class="c1">//bind the Query instance to query property</span>
    <span class="k">public</span> <span class="nx">query</span>: <span class="kt">Query</span> <span class="o">=</span> <span class="ow">new</span> <span class="nx">Query</span><span class="p">().</span><span class="kr">from</span><span class="p">(</span><span class="s1">'Employees'</span><span class="p">).</span><span class="nx">select</span><span class="p">([</span><span class="s1">'FirstName'</span><span class="p">,</span> <span class="s1">'City'</span><span class="p">,</span><span class="s1">'EmployeeID'</span><span class="p">]).</span><span class="nx">take</span><span class="p">(</span><span class="mf">6</span><span class="p">);</span>
    <span class="c1">//set the placeholder to DropDownList input</span>
    <span class="k">public</span> <span class="nx">text</span>: <span class="kt">string</span> <span class="o">=</span> <span class="s2">"Select an employee"</span><span class="p">;</span>
    <span class="c1">//sort the result items</span>
    <span class="k">public</span> <span class="nx">sorting</span>: <span class="kt">string</span> <span class="o">=</span> <span class="s1">'Ascending'</span><span class="p">;</span>
<span class="p">}</span></code></pre></div>
</div>


<div role="tabpanel" class="tab-pane" id="hxtxeoo6kpex47o1va2c52lzgm2u0oi8-ts" data-original-lang="ts">
<div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="k">import</span> <span class="p">{</span> <span class="nx">bootstrapApplication</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@angular/platform-browser'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">AppComponent</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'./app.component'</span><span class="p">;</span>
<span class="k">import</span> <span class="s1">'zone.js'</span><span class="p">;</span>
<span class="nx">bootstrapApplication</span><span class="p">(</span><span class="nx">AppComponent</span><span class="p">).</span><span class="k">catch</span><span class="p">((</span><span class="nx">err</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="nx">console</span><span class="p">.</span><span class="nx">error</span><span class="p">(</span><span class="nx">err</span><span class="p">));</span></code></pre></div>
</div>

<div role="tabpanel" class="tab-pane" id="ndgqf7jq3hv2wbo62xv84l8qir6cu0f7-ts" data-original-lang="ts">
<div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="o">&lt;</span><span class="nx">div</span> <span class="nx">id</span><span class="o">=</span><span class="s2">"wrapper"</span> <span class="nx">style</span><span class="o">=</span><span class="s1">'margin-top: 20px'</span><span class="o">&gt;</span>
	  <span class="o">&lt;</span><span class="nx">div</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'content'</span> <span class="nx">style</span><span class="o">=</span><span class="s2">"margin: 0px auto; width:300px;"</span><span class="o">&gt;</span>
        <span class="c">&lt;!--</span> <span class="nx">specifies</span> <span class="nx">the</span> <span class="nx">template</span> <span class="kt">string</span> <span class="k">for</span> <span class="nx">the</span> <span class="nx">DropDownList</span> <span class="nx">component</span><span class="o">--&gt;</span>
        <span class="o">&lt;</span><span class="nx">ejs</span><span class="o">-</span><span class="nx">dropdownlist</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'dropdownlist-template'</span> <span class="p">[</span><span class="nx">dataSource</span><span class="p">]</span><span class="o">=</span><span class="s1">'data'</span> <span class="p">[</span><span class="nx">fields</span><span class="p">]</span><span class="o">=</span><span class="s1">'fields'</span> <span class="p">[</span><span class="nx">sortOrder</span><span class="p">]</span><span class="o">=</span><span class="s1">'sorting'</span> <span class="p">[</span><span class="nx">query</span><span class="p">]</span><span class="o">=</span><span class="s1">'query'</span> <span class="p">[</span><span class="nx">popupHeight</span><span class="p">]</span><span class="o">=</span><span class="s1">'height'</span> <span class="p">[</span><span class="nx">placeholder</span><span class="p">]</span><span class="o">=</span><span class="s1">'text'</span> <span class="p">[</span><span class="nx">itemTemplate</span><span class="p">]</span><span class="o">=</span><span class="s1">'itemTemplate'</span><span class="o">&gt;</span>
            <span class="o">&lt;</span><span class="nx">ng</span><span class="o">-</span><span class="nx">template</span> <span class="err">#</span><span class="nx">itemTemplate</span><span class="o">=</span><span class="s2">""</span> <span class="kd">let</span><span class="o">-</span><span class="nx">data</span><span class="o">=</span><span class="s2">""</span><span class="o">&gt;</span>
                <span class="c">&lt;!--</span><span class="nx">set</span> <span class="nx">the</span> <span class="nx">value</span> <span class="nx">to</span> <span class="nx">itemTemplate</span> <span class="nx">property</span><span class="o">--&gt;</span>
                <span class="o">&lt;</span><span class="nx">span</span><span class="o">&gt;&lt;</span><span class="nx">span</span> <span class="kd">class</span><span class="o">=</span><span class="s1">'name'</span><span class="o">&gt;</span> <span class="o">&lt;</span><span class="err">/span&gt;&lt;span class ='city'&gt;&lt;/span&gt;&lt;/span&gt;</span>
            <span class="o">&lt;</span><span class="err">/ng-template&gt;</span>
        <span class="o">&lt;</span><span class="err">/ejs-dropdownlist&gt;</span>
      <span class="o">&lt;</span><span class="err">/div&gt;</span>
    <span class="o">&lt;</span><span class="err">/div&gt;</span></code></pre></div>
</div>

</div>

</div>

<p><button class="preview-sample-button" id="PreviewSampleButton-6mlu7bd8wk4m8agsf3m3gmvggasf5c7k" onclick="LoadPreviewSample('https://ej2.syncfusion.com/angular/documentation/samples/dropdownlist/template-cs1',this.id);">Preview Sample</button><button class="stackblitz-button" id="StackBlitzButton-6mlu7bd8wk4m8agsf3m3gmvggasf5c7k" onclick="OpenSampleInStackBlitz('https://ej2.syncfusion.com/angular/documentation/samples/dropdownlist/template-cs1');"><img class="stackblitz-icon" src="https://cdn.syncfusion.com/documentation/images/StackBlitz-icon.png" alt="Stackblitz Support"><span class="stackblitz-text">Open in Stackblitz</span></button></p>
<div id="PreviewSampleHolder-6mlu7bd8wk4m8agsf3m3gmvggasf5c7k"></div>

<h2 id="value-template">Value template</h2>

<p>The currently selected value that is displayed by default on the DropDownList input element can be customized using the <a href="https://ej2.syncfusion.com/angular/documentation/api/drop-down-list#valuetemplate">valueTemplate</a> property.</p>

<p>In the following sample, the selected value is displayed as a combined text of both <code>FirstName</code> and <code>City</code> in the DropDownList input, which is separated by a hyphen.</p>

<div class="tabs" id="code-snippet-2">

<ul class="nav nav-tabs" role="tablist">

<li role="presentation" class=""><a data-target="#qu6cswrm0t7apukm8vi84jlo4yoem6yr-ts" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="app.ts" data-original-lang="ts">app.ts</a></li>
<li role="presentation" class=""><a data-target="#7th72hvpcaoz55ltd7c3xaqan5m0t3bg-ts" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="main.ts" data-original-lang="ts">main.ts</a></li>
<li role="presentation" class=""><a data-target="#3un22bazwdn7o3329jfyul9clbb4nkej-ts" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="template.html" data-original-lang="ts">template.html</a></li>

</ul>

<div class="tab-content">


<div role="tabpanel" class="tab-pane" id="qu6cswrm0t7apukm8vi84jlo4yoem6yr-ts" data-original-lang="ts">
<div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="k">import</span> <span class="p">{</span> <span class="nx">NgModule</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@angular/core'</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">BrowserModule</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@angular/platform-browser'</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">FormsModule</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@angular/forms'</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">DropDownListModule</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-angular-dropdowns'</span>



<span class="k">import</span> <span class="p">{</span> <span class="nx">Component</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@angular/core'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">Query</span><span class="p">,</span> <span class="nx">DataManager</span><span class="p">,</span> <span class="nx">ODataV4Adaptor</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-data'</span>

<span class="kd">@Component</span><span class="p">({</span>
<span class="nx">imports</span><span class="o">:</span> <span class="p">[</span>
        <span class="nx">FormsModule</span><span class="p">,</span><span class="nx">DropDownListModule</span>
    <span class="p">],</span>


<span class="nx">standalone</span>: <span class="kt">true</span><span class="p">,</span>
    <span class="nx">selector</span><span class="o">:</span> <span class="s1">'app-root'</span><span class="p">,</span>
    <span class="c1">// specifies the template url path</span>
    <span class="nx">templateUrl</span><span class="o">:</span> <span class="s1">'template.html'</span>
<span class="p">})</span>
<span class="k">export</span> <span class="kd">class</span> <span class="nx">AppComponent</span> <span class="p">{</span>
    <span class="kr">constructor</span><span class="p">()</span> <span class="p">{</span>
    <span class="p">}</span>
    <span class="c1">//bind the DataManager instance to dataSource property</span>
    <span class="k">public</span> <span class="nx">data</span>: <span class="kt">DataManager</span> <span class="o">=</span> <span class="ow">new</span> <span class="nx">DataManager</span><span class="p">({</span>
            <span class="nx">url</span><span class="o">:</span> <span class="s1">'https://services.odata.org/V4/Northwind/Northwind.svc/'</span><span class="p">,</span>
            <span class="nx">adaptor</span>: <span class="kt">new</span> <span class="nx">ODataV4Adaptor</span><span class="p">,</span>
            <span class="nx">crossDomain</span>: <span class="kt">true</span>
        <span class="p">});</span>
    <span class="c1">// maps the appropriate column to fields property</span>
    <span class="k">public</span> <span class="nx">fields</span>: <span class="kt">Object</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">text</span><span class="o">:</span> <span class="s1">'FirstName'</span><span class="p">,</span> <span class="nx">value</span><span class="o">:</span> <span class="s1">'EmployeeID'</span> <span class="p">};</span>
    <span class="c1">//bind the Query instance to query property</span>
    <span class="k">public</span> <span class="nx">query</span>: <span class="kt">Query</span> <span class="o">=</span> <span class="ow">new</span> <span class="nx">Query</span><span class="p">().</span><span class="kr">from</span><span class="p">(</span><span class="s1">'Employees'</span><span class="p">).</span><span class="nx">select</span><span class="p">([</span><span class="s1">'FirstName'</span><span class="p">,</span> <span class="s1">'City'</span><span class="p">,</span><span class="s1">'EmployeeID'</span><span class="p">]).</span><span class="nx">take</span><span class="p">(</span><span class="mf">6</span><span class="p">);</span>
    <span class="c1">//set the placeholder to DropDownList input</span>
    <span class="k">public</span> <span class="nx">text</span>: <span class="kt">string</span> <span class="o">=</span> <span class="s2">"Select an employee"</span><span class="p">;</span>
    <span class="c1">//sort the result items</span>
    <span class="k">public</span> <span class="nx">sorting</span>: <span class="kt">string</span> <span class="o">=</span> <span class="s1">'Ascending'</span><span class="p">;</span>
<span class="p">}</span></code></pre></div>
</div>


<div role="tabpanel" class="tab-pane" id="7th72hvpcaoz55ltd7c3xaqan5m0t3bg-ts" data-original-lang="ts">
<div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="k">import</span> <span class="p">{</span> <span class="nx">bootstrapApplication</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@angular/platform-browser'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">AppComponent</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'./app.component'</span><span class="p">;</span>
<span class="k">import</span> <span class="s1">'zone.js'</span><span class="p">;</span>
<span class="nx">bootstrapApplication</span><span class="p">(</span><span class="nx">AppComponent</span><span class="p">).</span><span class="k">catch</span><span class="p">((</span><span class="nx">err</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="nx">console</span><span class="p">.</span><span class="nx">error</span><span class="p">(</span><span class="nx">err</span><span class="p">));</span></code></pre></div>
</div>

<div role="tabpanel" class="tab-pane" id="3un22bazwdn7o3329jfyul9clbb4nkej-ts" data-original-lang="ts">
<div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="o">&lt;</span><span class="nx">div</span> <span class="nx">id</span><span class="o">=</span><span class="s2">"wrapper"</span><span class="o">&gt;</span>
	  <span class="o">&lt;</span><span class="nx">div</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'content'</span> <span class="nx">style</span><span class="o">=</span><span class="s2">"margin: 0px auto; width:300px;"</span><span class="o">&gt;</span>
        <span class="c">&lt;!--</span> <span class="nx">specifies</span> <span class="nx">the</span> <span class="nx">template</span> <span class="kt">string</span> <span class="k">for</span> <span class="nx">the</span> <span class="nx">DropDownList</span> <span class="nx">component</span><span class="o">--&gt;</span>
        <span class="o">&lt;</span><span class="nx">ejs</span><span class="o">-</span><span class="nx">dropdownlist</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'ddlelement'</span> <span class="err">#</span><span class="nx">samples</span> <span class="p">[</span><span class="nx">dataSource</span><span class="p">]</span><span class="o">=</span><span class="s1">'data'</span> <span class="p">[</span><span class="nx">fields</span><span class="p">]</span><span class="o">=</span><span class="s1">'fields'</span> <span class="p">[</span><span class="nx">sortOrder</span><span class="p">]</span><span class="o">=</span><span class="s1">'sorting'</span> <span class="p">[</span><span class="nx">placeholder</span><span class="p">]</span><span class="o">=</span><span class="s1">'text'</span> <span class="p">[</span><span class="nx">query</span><span class="p">]</span><span class="o">=</span><span class="s1">'query'</span> <span class="p">[</span><span class="nx">itemTemplate</span><span class="p">]</span><span class="o">=</span><span class="s1">'itemTemplate'</span> <span class="p">[</span><span class="nx">valueTemplate</span><span class="p">]</span><span class="o">=</span><span class="s1">'valueTemplate'</span><span class="o">&gt;</span>
            <span class="o">&lt;</span><span class="nx">ng</span><span class="o">-</span><span class="nx">template</span> <span class="err">#</span><span class="nx">itemTemplate</span><span class="o">=</span><span class="s2">""</span> <span class="kd">let</span><span class="o">-</span><span class="nx">data</span><span class="o">=</span><span class="s2">""</span><span class="o">&gt;</span>
                <span class="c">&lt;!--</span><span class="nx">set</span> <span class="nx">the</span> <span class="nx">value</span> <span class="nx">to</span> <span class="nx">itemTemplate</span> <span class="nx">property</span><span class="o">--&gt;</span>
                <span class="o">&lt;</span><span class="nx">span</span><span class="o">&gt;&lt;</span><span class="nx">span</span> <span class="kd">class</span><span class="o">=</span><span class="s1">'name'</span><span class="o">&gt;</span> <span class="o">&lt;</span><span class="err">/span&gt;&lt;span class ='city'&gt;&lt;/span&gt;&lt;/span&gt;</span>
            <span class="o">&lt;</span><span class="err">/ng-template&gt;</span>
            <span class="o">&lt;</span><span class="nx">ng</span><span class="o">-</span><span class="nx">template</span> <span class="err">#</span><span class="nx">valueTemplate</span><span class="o">=</span><span class="s2">""</span> <span class="kd">let</span><span class="o">-</span><span class="nx">data</span><span class="o">=</span><span class="s2">""</span><span class="o">&gt;</span>
                <span class="c">&lt;!--</span><span class="nx">set</span> <span class="nx">the</span> <span class="nx">value</span> <span class="nx">to</span> <span class="nx">valueTemplate</span> <span class="nx">property</span><span class="o">--&gt;</span>
                <span class="o">&lt;</span><span class="nx">span</span> <span class="kd">class</span><span class="o">=</span><span class="s1">'value'</span><span class="o">&gt;</span> <span class="o">-</span> <span class="o">&lt;</span><span class="err">/span&gt;</span>
            <span class="o">&lt;</span><span class="err">/ng-template&gt;</span>
        <span class="o">&lt;</span><span class="err">/ejs-dropdownlist&gt;</span>
      <span class="o">&lt;</span><span class="err">/div&gt;</span>
    <span class="o">&lt;</span><span class="err">/div&gt;</span></code></pre></div>
</div>

</div>

</div>

<p><button class="preview-sample-button" id="PreviewSampleButton-v4xfxifzb55df6zg1gwlv176etbja1cx" onclick="LoadPreviewSample('https://ej2.syncfusion.com/angular/documentation/samples/dropdownlist/value-template-cs1',this.id);">Preview Sample</button><button class="stackblitz-button" id="StackBlitzButton-v4xfxifzb55df6zg1gwlv176etbja1cx" onclick="OpenSampleInStackBlitz('https://ej2.syncfusion.com/angular/documentation/samples/dropdownlist/value-template-cs1');"><img class="stackblitz-icon" src="https://cdn.syncfusion.com/documentation/images/StackBlitz-icon.png" alt="Stackblitz Support"><span class="stackblitz-text">Open in Stackblitz</span></button></p>
<div id="PreviewSampleHolder-v4xfxifzb55df6zg1gwlv176etbja1cx"></div>

<h2 id="group-template">Group template</h2>

<p>The group header title under which appropriate sub-items are categorized can also be customized with the help of <a href="https://ej2.syncfusion.com/angular/documentation/api/drop-down-list#grouptemplate-string">groupTemplate</a> property. This template is common for both inline and floating group header template.</p>

<p>In the following sample, employees are grouped according to their city.</p>

<div class="tabs" id="code-snippet-3">

<ul class="nav nav-tabs" role="tablist">

<li role="presentation" class=""><a data-target="#muw0do1jw9bi3h2yjvlzxitfdlm23fvz-ts" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="app.ts" data-original-lang="ts">app.ts</a></li>
<li role="presentation" class=""><a data-target="#y3nvj83q8evms871frltxlhjtvw9cebe-ts" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="main.ts" data-original-lang="ts">main.ts</a></li>
<li role="presentation" class=""><a data-target="#hcp9qrukl5haqlpc5y47s80jnaw37hxk-ts" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="template.html" data-original-lang="ts">template.html</a></li>

</ul>

<div class="tab-content">


<div role="tabpanel" class="tab-pane" id="muw0do1jw9bi3h2yjvlzxitfdlm23fvz-ts" data-original-lang="ts">
<div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="k">import</span> <span class="p">{</span> <span class="nx">NgModule</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@angular/core'</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">BrowserModule</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@angular/platform-browser'</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">FormsModule</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@angular/forms'</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">DropDownListModule</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-angular-dropdowns'</span>



<span class="k">import</span> <span class="p">{</span> <span class="nx">Component</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@angular/core'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">Query</span><span class="p">,</span> <span class="nx">Predicate</span><span class="p">,</span> <span class="nx">DataManager</span><span class="p">,</span> <span class="nx">ODataV4Adaptor</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-data'</span>

<span class="kd">@Component</span><span class="p">({</span>
<span class="nx">imports</span><span class="o">:</span> <span class="p">[</span>
        <span class="nx">FormsModule</span><span class="p">,</span><span class="nx">DropDownListModule</span>
    <span class="p">],</span>


<span class="nx">standalone</span>: <span class="kt">true</span><span class="p">,</span>
    <span class="nx">selector</span><span class="o">:</span> <span class="s1">'app-root'</span><span class="p">,</span>
    <span class="c1">// specifies the template url path</span>
    <span class="nx">templateUrl</span><span class="o">:</span> <span class="s1">'template.html'</span>
<span class="p">})</span>
<span class="k">export</span> <span class="kd">class</span> <span class="nx">AppComponent</span> <span class="p">{</span>
    <span class="kr">constructor</span><span class="p">()</span> <span class="p">{</span>
    <span class="p">}</span>
    <span class="c1">//bind the DataManager instance to dataSource property</span>
    <span class="k">public</span> <span class="nx">data</span>: <span class="kt">DataManager</span> <span class="o">=</span> <span class="ow">new</span> <span class="nx">DataManager</span><span class="p">({</span>
            <span class="nx">url</span><span class="o">:</span> <span class="s1">'https://services.odata.org/V4/Northwind/Northwind.svc/'</span><span class="p">,</span>
            <span class="nx">adaptor</span>: <span class="kt">new</span> <span class="nx">ODataV4Adaptor</span><span class="p">,</span>
            <span class="nx">crossDomain</span>: <span class="kt">true</span>
        <span class="p">});</span>
    <span class="c1">// form  predicate to fetch the grouped data</span>
    <span class="k">public</span> <span class="nx">groupPredicate</span> <span class="o">=</span> <span class="ow">new</span> <span class="nx">Predicate</span><span class="p">(</span><span class="s1">'City'</span><span class="p">,</span> <span class="s1">'equal'</span><span class="p">,</span><span class="s1">'london'</span><span class="p">).</span><span class="nx">or</span><span class="p">(</span><span class="s1">'City'</span><span class="p">,</span><span class="s1">'equal'</span><span class="p">,</span><span class="s1">'seattle'</span><span class="p">);</span>
    <span class="c1">// maps the appropriate column to fields property</span>
    <span class="k">public</span> <span class="nx">fields</span>: <span class="kt">Object</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">text</span><span class="o">:</span> <span class="s1">'FirstName'</span><span class="p">,</span> <span class="nx">value</span><span class="o">:</span> <span class="s1">'EmployeeID'</span><span class="p">,</span> <span class="nx">groupBy</span><span class="o">:</span><span class="s1">'City'</span> <span class="p">};</span>
    <span class="c1">//bind the Query instance to query property</span>
    <span class="k">public</span> <span class="nx">query</span>: <span class="kt">Query</span> <span class="o">=</span> <span class="ow">new</span> <span class="nx">Query</span><span class="p">().</span><span class="kr">from</span><span class="p">(</span><span class="s1">'Employees'</span><span class="p">).</span><span class="nx">select</span><span class="p">([</span><span class="s1">'FirstName'</span><span class="p">,</span> <span class="s1">'City'</span><span class="p">,</span><span class="s1">'EmployeeID'</span><span class="p">]).</span><span class="nx">take</span><span class="p">(</span><span class="mf">6</span><span class="p">).</span><span class="nx">where</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">groupPredicate</span><span class="p">);</span>
    <span class="c1">//set the placeholder to DropDownList input</span>
    <span class="k">public</span> <span class="nx">text</span>: <span class="kt">string</span> <span class="o">=</span> <span class="s2">"Select an employee"</span><span class="p">;</span>
    <span class="c1">//sort the result items</span>
    <span class="k">public</span> <span class="nx">sorting</span>: <span class="kt">string</span> <span class="o">=</span> <span class="s1">'Ascending'</span><span class="p">;</span>
<span class="p">}</span></code></pre></div>
</div>


<div role="tabpanel" class="tab-pane" id="y3nvj83q8evms871frltxlhjtvw9cebe-ts" data-original-lang="ts">
<div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="k">import</span> <span class="p">{</span> <span class="nx">bootstrapApplication</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@angular/platform-browser'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">AppComponent</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'./app.component'</span><span class="p">;</span>
<span class="k">import</span> <span class="s1">'zone.js'</span><span class="p">;</span>
<span class="nx">bootstrapApplication</span><span class="p">(</span><span class="nx">AppComponent</span><span class="p">).</span><span class="k">catch</span><span class="p">((</span><span class="nx">err</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="nx">console</span><span class="p">.</span><span class="nx">error</span><span class="p">(</span><span class="nx">err</span><span class="p">));</span></code></pre></div>
</div>

<div role="tabpanel" class="tab-pane" id="hcp9qrukl5haqlpc5y47s80jnaw37hxk-ts" data-original-lang="ts">
<div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="o">&lt;</span><span class="nx">div</span> <span class="nx">id</span><span class="o">=</span><span class="s2">"wrapper"</span> <span class="nx">style</span><span class="o">=</span><span class="s1">'margin-top: 20px'</span><span class="o">&gt;</span>
	  <span class="o">&lt;</span><span class="nx">div</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'content'</span> <span class="nx">style</span><span class="o">=</span><span class="s2">"margin: 0px auto; width:250px;"</span><span class="o">&gt;</span>
        <span class="c">&lt;!--</span> <span class="nx">specifies</span> <span class="nx">the</span> <span class="nx">template</span> <span class="kt">string</span> <span class="k">for</span> <span class="nx">the</span> <span class="nx">DropDownList</span> <span class="nx">component</span><span class="o">--&gt;</span>
        <span class="o">&lt;</span><span class="nx">ejs</span><span class="o">-</span><span class="nx">dropdownlist</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'ddlelement'</span> <span class="err">#</span><span class="nx">samples</span> <span class="p">[</span><span class="nx">dataSource</span><span class="p">]</span><span class="o">=</span><span class="s1">'data'</span> <span class="p">[</span><span class="nx">fields</span><span class="p">]</span><span class="o">=</span><span class="s1">'fields'</span> <span class="p">[</span><span class="nx">sortOrder</span><span class="p">]</span><span class="o">=</span><span class="s1">'sorting'</span> <span class="p">[</span><span class="nx">placeholder</span><span class="p">]</span><span class="o">=</span><span class="s1">'text'</span> <span class="p">[</span><span class="nx">groupTemplate</span><span class="p">]</span><span class="o">=</span><span class="s1">'groupTemplate'</span> <span class="p">[</span><span class="nx">query</span><span class="p">]</span><span class="o">=</span><span class="s1">'query'</span><span class="o">&gt;</span>
            <span class="o">&lt;</span><span class="nx">ng</span><span class="o">-</span><span class="nx">template</span> <span class="err">#</span><span class="nx">groupTemplate</span><span class="o">=</span><span class="s2">""</span> <span class="kd">let</span><span class="o">-</span><span class="nx">data</span><span class="o">=</span><span class="s2">""</span><span class="o">&gt;</span>
                <span class="c">&lt;!--</span><span class="nx">set</span> <span class="nx">the</span> <span class="nx">value</span> <span class="nx">to</span> <span class="nx">groupTemplate</span> <span class="nx">property</span><span class="o">--&gt;</span>
                <span class="o">&lt;</span><span class="nx">strong</span><span class="o">&gt;&lt;</span><span class="err">/strong&gt;</span>
            <span class="o">&lt;</span><span class="err">/ng-template&gt;</span>
        <span class="o">&lt;</span><span class="err">/ejs-dropdownlist&gt;</span>
      <span class="o">&lt;</span><span class="err">/div&gt;</span>
    <span class="o">&lt;</span><span class="err">/div&gt;</span></code></pre></div>
</div>

</div>

</div>

<p><button class="preview-sample-button" id="PreviewSampleButton-4u7lzejgzi8hbnfhafm1qnad19n2wcd3" onclick="LoadPreviewSample('https://ej2.syncfusion.com/angular/documentation/samples/dropdownlist/group-template-cs1',this.id);">Preview Sample</button><button class="stackblitz-button" id="StackBlitzButton-4u7lzejgzi8hbnfhafm1qnad19n2wcd3" onclick="OpenSampleInStackBlitz('https://ej2.syncfusion.com/angular/documentation/samples/dropdownlist/group-template-cs1');"><img class="stackblitz-icon" src="https://cdn.syncfusion.com/documentation/images/StackBlitz-icon.png" alt="Stackblitz Support"><span class="stackblitz-text">Open in Stackblitz</span></button></p>
<div id="PreviewSampleHolder-4u7lzejgzi8hbnfhafm1qnad19n2wcd3"></div>

<h2 id="header-template">Header template</h2>

<p>The header element is shown statically at the top of the popup list items within the<br>
DropDownList, and any custom element can be placed as a header element using the<br>
<a href="https://ej2.syncfusion.com/angular/documentation/api/drop-down-list#headertemplate">headerTemplate</a> property.</p>

<p>In the following sample, the list items and their headers are designed and displayed as two columns similar to multiple columns of the grid.</p>

<div class="tabs" id="code-snippet-4">

<ul class="nav nav-tabs" role="tablist">

<li role="presentation" class=""><a data-target="#bb1b680ggroa3wiqkvqxhspxnxgdlt68-ts" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="app.ts" data-original-lang="ts">app.ts</a></li>
<li role="presentation" class=""><a data-target="#3i4yxwqnkp4u3anwsux44k5hr5qdgjfk-ts" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="main.ts" data-original-lang="ts">main.ts</a></li>
<li role="presentation" class=""><a data-target="#hxuczo5fag80en7ff8mpjidm4m1je4dy-ts" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="template.html" data-original-lang="ts">template.html</a></li>

</ul>

<div class="tab-content">


<div role="tabpanel" class="tab-pane" id="bb1b680ggroa3wiqkvqxhspxnxgdlt68-ts" data-original-lang="ts">
<div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="k">import</span> <span class="p">{</span> <span class="nx">NgModule</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@angular/core'</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">BrowserModule</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@angular/platform-browser'</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">FormsModule</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@angular/forms'</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">DropDownListModule</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-angular-dropdowns'</span>



<span class="k">import</span> <span class="p">{</span> <span class="nx">Component</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@angular/core'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">Query</span><span class="p">,</span> <span class="nx">DataManager</span><span class="p">,</span> <span class="nx">ODataV4Adaptor</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-data'</span><span class="p">;</span>

<span class="kd">@Component</span><span class="p">({</span>
<span class="nx">imports</span><span class="o">:</span> <span class="p">[</span>
        <span class="nx">FormsModule</span><span class="p">,</span><span class="nx">DropDownListModule</span>
    <span class="p">],</span>


<span class="nx">standalone</span>: <span class="kt">true</span><span class="p">,</span>
    <span class="nx">selector</span><span class="o">:</span> <span class="s1">'app-root'</span><span class="p">,</span>
    <span class="c1">// specifies the template url path</span>
    <span class="nx">templateUrl</span><span class="o">:</span> <span class="s1">'template.html'</span>
<span class="p">})</span>
<span class="k">export</span> <span class="kd">class</span> <span class="nx">AppComponent</span> <span class="p">{</span>
    <span class="kr">constructor</span><span class="p">()</span> <span class="p">{</span>
    <span class="p">}</span>
    <span class="c1">//bind the DataManager instance to dataSource property</span>
    <span class="k">public</span> <span class="nx">data</span>: <span class="kt">DataManager</span> <span class="o">=</span> <span class="ow">new</span> <span class="nx">DataManager</span><span class="p">({</span>
            <span class="nx">url</span><span class="o">:</span> <span class="s1">'https://services.odata.org/V4/Northwind/Northwind.svc/'</span><span class="p">,</span>
            <span class="nx">adaptor</span>: <span class="kt">new</span> <span class="nx">ODataV4Adaptor</span><span class="p">,</span>
            <span class="nx">crossDomain</span>: <span class="kt">true</span>
        <span class="p">});</span>
    <span class="c1">// maps the appropriate column to fields property</span>
    <span class="k">public</span> <span class="nx">fields</span>: <span class="kt">Object</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">text</span><span class="o">:</span> <span class="s1">'FirstName'</span><span class="p">,</span> <span class="nx">value</span><span class="o">:</span> <span class="s1">'EmployeeID'</span> <span class="p">};</span>
    <span class="c1">//bind the Query instance to query property</span>
    <span class="k">public</span> <span class="nx">query</span>: <span class="kt">Query</span> <span class="o">=</span> <span class="ow">new</span> <span class="nx">Query</span><span class="p">().</span><span class="kr">from</span><span class="p">(</span><span class="s1">'Employees'</span><span class="p">).</span><span class="nx">select</span><span class="p">([</span><span class="s1">'FirstName'</span><span class="p">,</span> <span class="s1">'City'</span><span class="p">,</span><span class="s1">'EmployeeID'</span><span class="p">]).</span><span class="nx">take</span><span class="p">(</span><span class="mf">6</span><span class="p">);</span>
    <span class="c1">//set the placeholder to DropDownList input</span>
    <span class="k">public</span> <span class="nx">text</span>: <span class="kt">string</span> <span class="o">=</span> <span class="s2">"Select an employee"</span><span class="p">;</span>
    <span class="c1">//sort the result items</span>
    <span class="k">public</span> <span class="nx">sorting</span>: <span class="kt">string</span> <span class="o">=</span> <span class="s1">'Ascending'</span><span class="p">;</span>
<span class="p">}</span></code></pre></div>
</div>


<div role="tabpanel" class="tab-pane" id="3i4yxwqnkp4u3anwsux44k5hr5qdgjfk-ts" data-original-lang="ts">
<div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="k">import</span> <span class="p">{</span> <span class="nx">bootstrapApplication</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@angular/platform-browser'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">AppComponent</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'./app.component'</span><span class="p">;</span>
<span class="k">import</span> <span class="s1">'zone.js'</span><span class="p">;</span>
<span class="nx">bootstrapApplication</span><span class="p">(</span><span class="nx">AppComponent</span><span class="p">).</span><span class="k">catch</span><span class="p">((</span><span class="nx">err</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="nx">console</span><span class="p">.</span><span class="nx">error</span><span class="p">(</span><span class="nx">err</span><span class="p">));</span></code></pre></div>
</div>

<div role="tabpanel" class="tab-pane" id="hxuczo5fag80en7ff8mpjidm4m1je4dy-ts" data-original-lang="ts">
<div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="o">&lt;</span><span class="nx">div</span> <span class="nx">id</span><span class="o">=</span><span class="s2">"wrapper"</span> <span class="nx">style</span><span class="o">=</span><span class="s1">'margin-top: 20px'</span><span class="o">&gt;</span>
	  <span class="o">&lt;</span><span class="nx">div</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'content'</span> <span class="nx">style</span><span class="o">=</span><span class="s2">"margin: 0px auto; width:250px;"</span><span class="o">&gt;</span>
        <span class="c">&lt;!--</span> <span class="nx">specifies</span> <span class="nx">the</span> <span class="nx">template</span> <span class="kt">string</span> <span class="k">for</span> <span class="nx">the</span> <span class="nx">DropDownList</span> <span class="nx">component</span><span class="o">--&gt;</span>
        <span class="o">&lt;</span><span class="nx">ejs</span><span class="o">-</span><span class="nx">dropdownlist</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'ddlelement'</span> <span class="err">#</span><span class="nx">samples</span> <span class="p">[</span><span class="nx">dataSource</span><span class="p">]</span><span class="o">=</span><span class="s1">'data'</span> <span class="p">[</span><span class="nx">fields</span><span class="p">]</span><span class="o">=</span><span class="s1">'fields'</span> <span class="p">[</span><span class="nx">sortOrder</span><span class="p">]</span><span class="o">=</span><span class="s1">'sorting'</span> <span class="p">[</span><span class="nx">placeholder</span><span class="p">]</span><span class="o">=</span><span class="s1">'text'</span> <span class="p">[</span><span class="nx">query</span><span class="p">]</span><span class="o">=</span><span class="s1">'query'</span> <span class="p">[</span><span class="nx">headerTemplate</span><span class="p">]</span><span class="o">=</span><span class="s1">'headerTemplate'</span> <span class="p">[</span><span class="nx">itemTemplate</span><span class="p">]</span><span class="o">=</span><span class="s1">'itemTemplate'</span><span class="o">&gt;</span>
            <span class="o">&lt;</span><span class="nx">ng</span><span class="o">-</span><span class="nx">template</span> <span class="err">#</span><span class="nx">itemTemplate</span><span class="o">=</span><span class="s2">""</span> <span class="kd">let</span><span class="o">-</span><span class="nx">data</span><span class="o">=</span><span class="s2">""</span><span class="o">&gt;</span>
                <span class="c">&lt;!--</span><span class="nx">set</span> <span class="nx">the</span> <span class="nx">value</span> <span class="nx">to</span> <span class="nx">itemTemplate</span> <span class="nx">property</span><span class="o">--&gt;</span>
                <span class="o">&lt;</span><span class="nx">span</span> <span class="kd">class</span><span class="o">=</span><span class="s1">'item'</span><span class="o">&gt;&lt;</span><span class="nx">span</span> <span class="kd">class</span><span class="o">=</span><span class="s1">'name'</span><span class="o">&gt;</span> <span class="o">&lt;</span><span class="err">/span&gt;&lt;span class ='city'&gt;&lt;/span&gt;&lt;/span&gt;</span>
            <span class="o">&lt;</span><span class="err">/ng-template&gt;</span>
            <span class="o">&lt;</span><span class="nx">ng</span><span class="o">-</span><span class="nx">template</span> <span class="err">#</span><span class="nx">headerTemplate</span><span class="o">=</span><span class="s2">""</span> <span class="kd">let</span><span class="o">-</span><span class="nx">data</span><span class="o">=</span><span class="s2">""</span><span class="o">&gt;</span>
                <span class="c">&lt;!--</span><span class="nx">set</span> <span class="nx">the</span> <span class="nx">value</span> <span class="nx">to</span> <span class="nx">headerTemplate</span> <span class="nx">property</span><span class="o">--&gt;</span>
                <span class="o">&lt;</span><span class="nx">span</span> <span class="kd">class</span><span class="o">=</span><span class="s1">'head'</span><span class="o">&gt;&lt;</span><span class="nx">span</span> <span class="kd">class</span><span class="o">=</span><span class="s1">'name'</span><span class="o">&gt;</span><span class="nx">Name</span><span class="o">&lt;</span><span class="err">/span&gt;&lt;span class='city'&gt;City&lt;/span&gt;&lt;/span&gt;</span>
            <span class="o">&lt;</span><span class="err">/ng-template&gt;</span>
        <span class="o">&lt;</span><span class="err">/ejs-dropdownlist&gt;</span>
      <span class="o">&lt;</span><span class="err">/div&gt;</span>
    <span class="o">&lt;</span><span class="err">/div&gt;</span></code></pre></div>
</div>

</div>

</div>

<p><button class="preview-sample-button" id="PreviewSampleButton-cqdue2immi4jtkpdd6yuflypihx0vyjt" onclick="LoadPreviewSample('https://ej2.syncfusion.com/angular/documentation/samples/dropdownlist/header-template-cs1',this.id);">Preview Sample</button><button class="stackblitz-button" id="StackBlitzButton-cqdue2immi4jtkpdd6yuflypihx0vyjt" onclick="OpenSampleInStackBlitz('https://ej2.syncfusion.com/angular/documentation/samples/dropdownlist/header-template-cs1');"><img class="stackblitz-icon" src="https://cdn.syncfusion.com/documentation/images/StackBlitz-icon.png" alt="Stackblitz Support"><span class="stackblitz-text">Open in Stackblitz</span></button></p>
<div id="PreviewSampleHolder-cqdue2immi4jtkpdd6yuflypihx0vyjt"></div>

<h2 id="footer-template">Footer template</h2>

<p>The DropDownList has options to show a footer element at the bottom of the list items in the popup list. Here, you can place any custom element as a footer element using<br>
the <a href="https://ej2.syncfusion.com/angular/documentation/api/drop-down-list#footertemplate">footerTemplate</a> property.</p>

<p>In the following sample, footer element displays the total number of list items present in the DropDownList</p>

<div class="tabs" id="code-snippet-5">

<ul class="nav nav-tabs" role="tablist">

<li role="presentation" class=""><a data-target="#ztw7yi5h06p50ikvre8x4gns8uhhvg2b-ts" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="app.ts" data-original-lang="ts">app.ts</a></li>
<li role="presentation" class=""><a data-target="#jrf9kz5y795i6okjxqq9kteejsj8rkt3-ts" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="main.ts" data-original-lang="ts">main.ts</a></li>
<li role="presentation" class=""><a data-target="#xblygdbjp9uegmgctfq7q7dvn90z38w5-ts" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="template.html" data-original-lang="ts">template.html</a></li>

</ul>

<div class="tab-content">


<div role="tabpanel" class="tab-pane" id="ztw7yi5h06p50ikvre8x4gns8uhhvg2b-ts" data-original-lang="ts">
<div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="k">import</span> <span class="p">{</span> <span class="nx">NgModule</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@angular/core'</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">BrowserModule</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@angular/platform-browser'</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">FormsModule</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@angular/forms'</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">DropDownListModule</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-angular-dropdowns'</span>



<span class="k">import</span> <span class="p">{</span> <span class="nx">Component</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@angular/core'</span><span class="p">;</span>

<span class="kd">@Component</span><span class="p">({</span>
<span class="nx">imports</span><span class="o">:</span> <span class="p">[</span>
        <span class="nx">FormsModule</span><span class="p">,</span><span class="nx">DropDownListModule</span>
    <span class="p">],</span>


<span class="nx">standalone</span>: <span class="kt">true</span><span class="p">,</span>
    <span class="nx">selector</span><span class="o">:</span> <span class="s1">'app-root'</span><span class="p">,</span>
    <span class="c1">// specifies the template url path</span>
    <span class="nx">templateUrl</span><span class="o">:</span> <span class="s1">'template.html'</span>
<span class="p">})</span>
<span class="k">export</span> <span class="kd">class</span> <span class="nx">AppComponent</span> <span class="p">{</span>
    <span class="kr">constructor</span><span class="p">()</span> <span class="p">{</span>
    <span class="p">}</span>
    <span class="c1">// defined the array of data</span>
    <span class="k">public</span> <span class="nx">data</span>: <span class="kt">Object</span><span class="p">[]</span> <span class="o">=</span> <span class="p">[</span><span class="s1">'Badminton'</span><span class="p">,</span> <span class="s1">'Basketball'</span><span class="p">,</span> <span class="s1">'Cricket'</span><span class="p">,</span> <span class="s1">'Golf'</span><span class="p">,</span> <span class="s1">'Hockey'</span><span class="p">];</span>
    <span class="c1">// set placeholder text to DropDownList input element</span>
    <span class="k">public</span> <span class="nx">text</span>: <span class="kt">string</span> <span class="o">=</span> <span class="s1">'Select a game'</span><span class="p">;</span>
<span class="p">}</span></code></pre></div>
</div>


<div role="tabpanel" class="tab-pane" id="jrf9kz5y795i6okjxqq9kteejsj8rkt3-ts" data-original-lang="ts">
<div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="k">import</span> <span class="p">{</span> <span class="nx">bootstrapApplication</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@angular/platform-browser'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">AppComponent</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'./app.component'</span><span class="p">;</span>
<span class="k">import</span> <span class="s1">'zone.js'</span><span class="p">;</span>
<span class="nx">bootstrapApplication</span><span class="p">(</span><span class="nx">AppComponent</span><span class="p">).</span><span class="k">catch</span><span class="p">((</span><span class="nx">err</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="nx">console</span><span class="p">.</span><span class="nx">error</span><span class="p">(</span><span class="nx">err</span><span class="p">));</span></code></pre></div>
</div>

<div role="tabpanel" class="tab-pane" id="xblygdbjp9uegmgctfq7q7dvn90z38w5-ts" data-original-lang="ts">
<div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="o">&lt;</span><span class="nx">div</span> <span class="nx">id</span><span class="o">=</span><span class="s2">"wrapper"</span> <span class="nx">style</span><span class="o">=</span><span class="s1">'margin-top: 20px'</span><span class="o">&gt;</span>
	  <span class="o">&lt;</span><span class="nx">div</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'content'</span> <span class="nx">style</span><span class="o">=</span><span class="s2">"margin: 0px auto; width:250px;"</span><span class="o">&gt;</span>
        <span class="c">&lt;!--</span> <span class="nx">specifies</span> <span class="nx">the</span> <span class="nx">template</span> <span class="kt">string</span> <span class="k">for</span> <span class="nx">the</span> <span class="nx">DropDownList</span> <span class="nx">component</span><span class="o">--&gt;</span>
        <span class="o">&lt;</span><span class="nx">ejs</span><span class="o">-</span><span class="nx">dropdownlist</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'ddlelement'</span> <span class="err">#</span><span class="nx">samples</span> <span class="p">[</span><span class="nx">dataSource</span><span class="p">]</span><span class="o">=</span><span class="s1">'data'</span> <span class="p">[</span><span class="nx">placeholder</span><span class="p">]</span><span class="o">=</span><span class="s1">'text'</span> <span class="p">[</span><span class="nx">footerTemplate</span><span class="p">]</span><span class="o">=</span><span class="s1">'footerTemplate'</span><span class="o">&gt;</span>
            <span class="o">&lt;</span><span class="nx">ng</span><span class="o">-</span><span class="nx">template</span> <span class="err">#</span><span class="nx">footerTemplate</span><span class="o">=</span><span class="s2">""</span> <span class="kd">let</span><span class="o">-</span><span class="nx">data</span><span class="o">=</span><span class="s2">""</span><span class="o">&gt;</span>
                <span class="c">&lt;!--</span><span class="nx">set</span> <span class="nx">the</span> <span class="nx">value</span> <span class="nx">to</span> <span class="nx">footerTemplate</span> <span class="nx">property</span><span class="o">--&gt;</span>
                <span class="o">&lt;</span><span class="nx">span</span> <span class="kd">class</span><span class="o">=</span><span class="s1">'foot'</span><span class="o">&gt;</span> <span class="nx">Total</span> <span class="nx">list</span> <span class="nx">item</span>: <span class="kt">5</span><span class="o">&lt;</span><span class="err">/span&gt;</span>
            <span class="o">&lt;</span><span class="err">/ng-template&gt;</span>
        <span class="o">&lt;</span><span class="err">/ejs-dropdownlist&gt;</span>
      <span class="o">&lt;</span><span class="err">/div&gt;</span>
    <span class="o">&lt;</span><span class="err">/div&gt;</span></code></pre></div>
</div>

</div>

</div>

<p><button class="preview-sample-button" id="PreviewSampleButton-rm3c3kbsl9johf2sf2sgipj23yrgba7k" onclick="LoadPreviewSample('https://ej2.syncfusion.com/angular/documentation/samples/dropdownlist/footer-template-cs1',this.id);">Preview Sample</button><button class="stackblitz-button" id="StackBlitzButton-rm3c3kbsl9johf2sf2sgipj23yrgba7k" onclick="OpenSampleInStackBlitz('https://ej2.syncfusion.com/angular/documentation/samples/dropdownlist/footer-template-cs1');"><img class="stackblitz-icon" src="https://cdn.syncfusion.com/documentation/images/StackBlitz-icon.png" alt="Stackblitz Support"><span class="stackblitz-text">Open in Stackblitz</span></button></p>
<div id="PreviewSampleHolder-rm3c3kbsl9johf2sf2sgipj23yrgba7k"></div>

<h2 id="no-records-template">No records template</h2>

<p>The DropDownList is provided with support for custom designing the popup list content when no data is found or no matches are found during search with the help of<br>
<a href="https://ej2.syncfusion.com/angular/documentation/api/drop-down-list#norecordstemplate">noRecordsTemplate</a> property.</p>

<p>In the following sample, popup list content displays a no data available notification.</p>

<div class="tabs" id="code-snippet-6">

<ul class="nav nav-tabs" role="tablist">

<li role="presentation" class=""><a data-target="#dtqtygcuagayst61opvbvw5huzvj72sr-ts" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="app.ts" data-original-lang="ts">app.ts</a></li>
<li role="presentation" class=""><a data-target="#1cvbtyr21ju67nbryjpdjd9iq5l77iw7-ts" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="main.ts" data-original-lang="ts">main.ts</a></li>

</ul>

<div class="tab-content">


<div role="tabpanel" class="tab-pane" id="dtqtygcuagayst61opvbvw5huzvj72sr-ts" data-original-lang="ts">
<div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="k">import</span> <span class="p">{</span> <span class="nx">NgModule</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@angular/core'</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">BrowserModule</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@angular/platform-browser'</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">FormsModule</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@angular/forms'</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">DropDownListModule</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-angular-dropdowns'</span>




<span class="k">import</span> <span class="p">{</span> <span class="nx">Component</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@angular/core'</span><span class="p">;</span>

<span class="kd">@Component</span><span class="p">({</span>
<span class="nx">imports</span><span class="o">:</span> <span class="p">[</span>
        <span class="nx">FormsModule</span><span class="p">,</span><span class="nx">DropDownListModule</span>
    <span class="p">],</span>


<span class="nx">standalone</span>: <span class="kt">true</span><span class="p">,</span>
    <span class="nx">selector</span><span class="o">:</span> <span class="s1">'app-root'</span><span class="p">,</span>
    <span class="c1">// specifies the template string for the DropDownList component</span>
    <span class="nx">template</span><span class="o">:</span>  <span class="sb">`&lt;ejs-dropdownlist id='ddlelement' [dataSource]='data' placeholder='Find a item'&gt;</span>
<span class="sb">                    &lt;ng-template #noRecordsTemplate&gt;</span>
<span class="sb">                        &lt;span class='norecord'&gt; NO DATA AVAILABLE&lt;/span&gt;</span>
<span class="sb">                    &lt;/ng-template&gt;</span>
<span class="sb">                 &lt;/ejs-dropdownlist&gt;`</span>
<span class="p">})</span>
<span class="k">export</span> <span class="kd">class</span> <span class="nx">AppComponent</span> <span class="p">{</span>
    <span class="c1">// defined the empty array data</span>
    <span class="k">public</span> <span class="nx">data</span>: <span class="kt">string</span><span class="p">[]</span> <span class="o">=</span> <span class="p">[];</span>
<span class="p">}</span></code></pre></div>
</div>


<div role="tabpanel" class="tab-pane" id="1cvbtyr21ju67nbryjpdjd9iq5l77iw7-ts" data-original-lang="ts">
<div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="k">import</span> <span class="p">{</span> <span class="nx">bootstrapApplication</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@angular/platform-browser'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">AppComponent</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'./app.component'</span><span class="p">;</span>
<span class="k">import</span> <span class="s1">'zone.js'</span><span class="p">;</span>
<span class="nx">bootstrapApplication</span><span class="p">(</span><span class="nx">AppComponent</span><span class="p">).</span><span class="k">catch</span><span class="p">((</span><span class="nx">err</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="nx">console</span><span class="p">.</span><span class="nx">error</span><span class="p">(</span><span class="nx">err</span><span class="p">));</span></code></pre></div>
</div>

</div>

</div>

<p><button class="preview-sample-button" id="PreviewSampleButton-krq4ovmo61a0dh51rfmbfinupbz2xhpa" onclick="LoadPreviewSample('https://ej2.syncfusion.com/angular/documentation/samples/dropdownlist/norecords-cs1',this.id);">Preview Sample</button><button class="stackblitz-button" id="StackBlitzButton-krq4ovmo61a0dh51rfmbfinupbz2xhpa" onclick="OpenSampleInStackBlitz('https://ej2.syncfusion.com/angular/documentation/samples/dropdownlist/norecords-cs1');"><img class="stackblitz-icon" src="https://cdn.syncfusion.com/documentation/images/StackBlitz-icon.png" alt="Stackblitz Support"><span class="stackblitz-text">Open in Stackblitz</span></button></p>
<div id="PreviewSampleHolder-krq4ovmo61a0dh51rfmbfinupbz2xhpa"></div>

<h2 id="action-failure-template">Action failure template</h2>

<p>There is also an option to customize the popup list content when the data fetch request fails at the remote server. This can be achieved using the <a href="https://ej2.syncfusion.com/angular/documentation/api/drop-down-list#actionfailuretemplate">actionFailureTemplate</a> property.</p>

<p>In the following sample, when the data fetch request fails, the DropDownList displays the notification.</p>

<div class="tabs" id="code-snippet-7">

<ul class="nav nav-tabs" role="tablist">

<li role="presentation" class=""><a data-target="#zqhy8cbsop2erxpc8nmpeo44olzhclup-ts" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="app.ts" data-original-lang="ts">app.ts</a></li>
<li role="presentation" class=""><a data-target="#zp1oxn90sc8a4gh97tf3hmpkaxm9ovwu-ts" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="main.ts" data-original-lang="ts">main.ts</a></li>

</ul>

<div class="tab-content">


<div role="tabpanel" class="tab-pane" id="zqhy8cbsop2erxpc8nmpeo44olzhclup-ts" data-original-lang="ts">
<div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="k">import</span> <span class="p">{</span> <span class="nx">NgModule</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@angular/core'</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">BrowserModule</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@angular/platform-browser'</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">FormsModule</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@angular/forms'</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">DropDownListModule</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-angular-dropdowns'</span>




<span class="k">import</span> <span class="p">{</span> <span class="nx">Component</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@angular/core'</span><span class="p">;</span>
<span class="c1">//import data manager related classes</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">Query</span><span class="p">,</span> <span class="nx">DataManager</span><span class="p">,</span> <span class="nx">ODataV4Adaptor</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-data'</span><span class="p">;</span>

<span class="kd">@Component</span><span class="p">({</span>
<span class="nx">imports</span><span class="o">:</span> <span class="p">[</span>
        <span class="nx">FormsModule</span><span class="p">,</span><span class="nx">DropDownListModule</span>
    <span class="p">],</span>


<span class="nx">standalone</span>: <span class="kt">true</span><span class="p">,</span>
    <span class="nx">selector</span><span class="o">:</span> <span class="s1">'app-root'</span><span class="p">,</span>
    <span class="c1">// specifies the template string for the DropDownList component</span>
    <span class="nx">template</span><span class="o">:</span>  <span class="sb">`&lt;ejs-dropdownlist id='ddlelement' [dataSource]='data' [query]='query' [fields]='fields'      placeholder='Find an employee'&gt;</span>
<span class="sb">                    &lt;ng-template #actionFailureTemplate&gt;</span>
<span class="sb">                        &lt;span class='action-failure'&gt; Data fetch get fails&lt;/span&gt;</span>
<span class="sb">                    &lt;/ng-template&gt;</span>
<span class="sb">                 &lt;/ejs-dropdownlist&gt;`</span>
<span class="p">})</span>
<span class="k">export</span> <span class="kd">class</span> <span class="nx">AppComponent</span> <span class="p">{</span>
    <span class="c1">//bind the data manager instance to dataSource property</span>
    <span class="k">public</span> <span class="nx">data</span>: <span class="kt">DataManager</span> <span class="o">=</span> <span class="ow">new</span> <span class="nx">DataManager</span><span class="p">({</span>
            <span class="c1">// Here, use the wrong url to display the action failure template</span>
            <span class="nx">url</span><span class="o">:</span> <span class="s1">'https://services.odata.org/V4/Northwind/Northwind.svcs/'</span><span class="p">,</span>
            <span class="nx">adaptor</span>: <span class="kt">new</span> <span class="nx">ODataV4Adaptor</span><span class="p">,</span>
            <span class="nx">crossDomain</span>: <span class="kt">true</span>
    <span class="p">});</span>
    <span class="c1">//bind the Query instance to query property</span>
    <span class="k">public</span> <span class="nx">query</span>: <span class="kt">Query</span> <span class="o">=</span>  <span class="ow">new</span> <span class="nx">Query</span><span class="p">().</span><span class="kr">from</span><span class="p">(</span><span class="s1">'Employees'</span><span class="p">).</span><span class="nx">select</span><span class="p">([</span><span class="s1">'FirstName'</span><span class="p">]).</span><span class="nx">take</span><span class="p">(</span><span class="mf">6</span><span class="p">);</span>

    <span class="c1">// maps the appropriate column to fields property</span>
    <span class="k">public</span> <span class="nx">fields</span>: <span class="kt">Object</span> <span class="o">=</span>  <span class="p">{</span> <span class="nx">text</span><span class="o">:</span> <span class="s1">'FirstName'</span><span class="p">,</span> <span class="nx">value</span><span class="o">:</span> <span class="s1">'EmployeeID'</span> <span class="p">};</span>
<span class="p">}</span></code></pre></div>
</div>


<div role="tabpanel" class="tab-pane" id="zp1oxn90sc8a4gh97tf3hmpkaxm9ovwu-ts" data-original-lang="ts">
<div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="k">import</span> <span class="p">{</span> <span class="nx">bootstrapApplication</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@angular/platform-browser'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">AppComponent</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'./app.component'</span><span class="p">;</span>
<span class="k">import</span> <span class="s1">'zone.js'</span><span class="p">;</span>
<span class="nx">bootstrapApplication</span><span class="p">(</span><span class="nx">AppComponent</span><span class="p">).</span><span class="k">catch</span><span class="p">((</span><span class="nx">err</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="nx">console</span><span class="p">.</span><span class="nx">error</span><span class="p">(</span><span class="nx">err</span><span class="p">));</span></code></pre></div>
</div>

</div>

</div>

<p><button class="preview-sample-button" id="PreviewSampleButton-1dey3fk3jnnaybcbbg14tfn5ky4aseue" onclick="LoadPreviewSample('https://ej2.syncfusion.com/angular/documentation/samples/dropdownlist/norecords-cs2',this.id);">Preview Sample</button><button class="stackblitz-button" id="StackBlitzButton-1dey3fk3jnnaybcbbg14tfn5ky4aseue" onclick="OpenSampleInStackBlitz('https://ej2.syncfusion.com/angular/documentation/samples/dropdownlist/norecords-cs2');"><img class="stackblitz-icon" src="https://cdn.syncfusion.com/documentation/images/StackBlitz-icon.png" alt="Stackblitz Support"><span class="stackblitz-text">Open in Stackblitz</span></button></p>
<div id="PreviewSampleHolder-1dey3fk3jnnaybcbbg14tfn5ky4aseue"></div>

<h2 id="see-also">See Also</h2>

<ul>
  <li><a href="./filtering">How to achieve filtering</a></li>
  <li><a href="./grouping">How to group the data using header</a></li>
  <li><a href="./how-to/icons-support">How to show the list items with icon</a></li>
  <li><a href="./how-to/tooltip">How to render tooltip for the options</a></li>
</ul>
</div>
        <ejs-contextmenu #contextmenu cssClass="e-contextMenu-template" id="contextmenu"
            (created)="onCreated()" [target]="'#contextmenutarget'" [items]="data"
            [itemTemplate]="itemTemplate" (beforeOpen)="addTemplateClass($event)">
            <ng-template #itemTemplate let-data>
                <div class="menu-wrapper">
                    <span class=" icon-right"></span>
                    <div class="text-content">
                        <span class="text"></span>
                        <span class="description"></span>
                    </div>
                </div>
            </ng-template>
        </ejs-contextmenu>
    </div>
</div>
```
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

ContextMenu items can be customized using the beforeItemRender event. This event triggers while rendering each menu item, providing access to the item element and menu item data for customization based on specific requirements. The following example demonstrates how to add keyboard shortcuts to specific menu items by appending span elements during the rendering process.

app.ts
main.ts
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { ContextMenuModule } from '@syncfusion/ej2-angular-navigations'
import { enableRipple } from '@syncfusion/ej2-base'



import { Component } from '@angular/core';
import { createElement } from '@syncfusion/ej2-base';
import { MenuEventArgs, MenuItemModel } from '@syncfusion/ej2-navigations';

@Component({
imports: [
        
        ContextMenuModule
    ],


standalone: true,
  selector: 'app-root',
  template: `<div class="e-section-control">
            <!--target element-->
            <div id="target">Right click / Touch hold to open the ContextMenu</div>
            <!-- To Render ContextMenu. -->
            <ejs-contextmenu id='contextmenu' #contextmenu target='#target' [items]='menuItems' (beforeItemRender)='itemBeforeEvent($event)'></ejs-contextmenu>
            </div>`
})

export class AppComponent {
    public menuItems: MenuItemModel[] = [
        {
            text: 'Save as...'
        },
        {
            text: 'View page source'
        },
        {
            text: 'Inspect'
        }];

    public itemBeforeEvent (args: MenuEventArgs) {
        let shortCutSpan: HTMLElement = createElement('span');
        let text: string = args.item.text as string;
        let shortCutText: string = text === 'Save as...' ? 'Ctrl + S' : (text === 'View page source' ? 'Ctrl + U'      : 'Ctrl + Shift + I');
        shortCutSpan.textContent = shortCutText;
        args.element.appendChild(shortCutSpan);
        shortCutSpan.setAttribute('class','shortcut');
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

To create span elements, the createElement utility function from @syncfusion/ej2-base is used. Add the import to your component file:
import { createElement } from '@syncfusion/ej2-base';

Multi-level nesting

The ContextMenu component supports multiple levels of nesting for creating hierarchical menu structures. You can create this by mapping child items inside the parent item’s array. The following example demonstrates a three-level nested ContextMenu structure.

app.ts
main.ts
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { ContextMenuModule } from '@syncfusion/ej2-angular-navigations'
import { enableRipple } from '@syncfusion/ej2-base'



import { Component } from '@angular/core';
import { MenuItemModel } from '@syncfusion/ej2-navigations';

@Component({
imports: [
        
        ContextMenuModule
    ],


standalone: true,
  selector: 'app-root',
  template: `<div class="e-section-control">
            <!--target element-->
            <div id="target">Right click / Touch hold to open the ContextMenu</div>
            <!-- To Render ContextMenu. -->
            <ejs-contextmenu id='contextmenu' #contextmenu target='#target' [items]='menuItems'></ejs-contextmenu>
            </div>`
})

export class AppComponent {
    public menuItems: MenuItemModel[] = [
        {
            text: 'Show All Bookmarks'
        },
        {
            text: 'Bookmarks Toolbar',
            items: [
                {
                    text: 'Most Visited',
                    items:[
                        {
                            text: 'Gmail'
                        },
                        {
                            text: 'Google'
                        }
                    ]
                },
                {
                    text: 'Recently Added'
                }
            ]
        }];

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

To open sub menu items only on click, set the showItemOnClick property to true.

Search docs

Ask Syncfusion AI Assistant

Search docs

Ask Syncfusion AI Assistant

Template and Multilevel Nesting in Angular Context Menu

Item template

Customize specific menu items

Multi-level nesting

See Also