Template and Multilevel Nesting in Angular Context Menu

26 Sep 202624 minutes to read

Item template

The itemTemplate property in the Angular Context Menu 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 Angular Context Menu via the [itemTemplate] property. The template exposes the data of each menu item through the implicit let-data variable.

app.component.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-ai-assistview">Templates in Angular AI AssistView</h1>

<p>The AI AssistView component offers several template options to customize the banner, prompt items, response items, suggestions, and footer.</p>

<h2 id="banner-template">Banner template</h2>

<p>The <a href="../api/ai-assistview#bannertemplate">bannerTemplate</a> property allows for the display of custom content, such as a welcome note or introductory instructions, at the top of the AI AssistView’s conversation area.</p>

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

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

<li role="presentation" class=""><a data-target="#ppylts9w3o16vchdb59fb082a54hwn16-ts" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="app.component.ts" data-original-lang="ts">app.component.ts</a></li>
<li role="presentation" class=""><a data-target="#tw76e1px9medv4mou7gxx7yqy2oek7p7-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="ppylts9w3o16vchdb59fb082a54hwn16-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">AIAssistViewModule</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-angular-interactive-chat'</span><span class="p">;</span>

<span class="k">import</span> <span class="p">{</span> <span class="nx">Component</span><span class="p">,</span> <span class="nx">ViewChild</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">AIAssistViewComponent</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-angular-interactive-chat'</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">AIAssistViewModule</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 AI AssistView component</span>
    <span class="nx">template</span><span class="o">:</span> <span class="sb">`</span>
<span class="sb">    &lt;div ejs-aiassistview id="banner" #aiAssistViewComponent (promptRequest)="onPromptRequest()"&gt;</span>
<span class="sb">        &lt;ng-template #bannerTemplate&gt;</span>
<span class="sb">            &lt;div class="banner-content"&gt;</span>
<span class="sb">                &lt;div class="e-icons e-assistview-icon"&gt;&lt;/div&gt;</span>
<span class="sb">                &lt;h3&gt;AI Assistance&lt;/h3&gt;</span>
<span class="sb">                &lt;div&gt;Your everyday AI companion.&lt;/div&gt;</span>
<span class="sb">            &lt;/div&gt;</span>
<span class="sb">        &lt;/ng-template&gt;</span>
<span class="sb">    &lt;/div&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="kd">@ViewChild</span><span class="p">(</span><span class="s1">'aiAssistViewComponent'</span><span class="p">)</span>
    <span class="k">public</span> <span class="nx">aiAssistViewComponent</span><span class="o">!:</span> <span class="nx">AIAssistViewComponent</span><span class="p">;</span>

    <span class="k">public</span> <span class="nx">onPromptRequest</span> <span class="o">=</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span>
        <span class="nx">setTimeout</span><span class="p">(()</span> <span class="p">=&gt;</span> <span class="p">{</span>
          <span class="kd">let</span> <span class="nx">defaultResponse</span> <span class="o">=</span> <span class="s1">'For real-time prompt processing, connect the AIAssistView component to your preferred AI service, such as OpenAI or Azure Cognitive Services. Ensure you obtain the necessary API credentials to authenticate and enable seamless integration.'</span><span class="p">;</span>
          <span class="k">this</span><span class="p">.</span><span class="nx">aiAssistViewComponent</span><span class="p">.</span><span class="nx">addPromptResponse</span><span class="p">(</span><span class="nx">defaultResponse</span><span class="p">);</span>
        <span class="p">},</span> <span class="mf">1000</span><span class="p">);</span>
    <span class="p">};</span>
<span class="p">}</span></code></pre></div>
</div>


<div role="tabpanel" class="tab-pane" id="tw76e1px9medv4mou7gxx7yqy2oek7p7-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="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-qgcucc8zsocfnsamqxwprm70z05sntj8" onclick="LoadPreviewSample('https://ej2.syncfusion.com/angular/documentation/samples/ai-assistview/templates/bannerTemplate',this.id);">Preview Sample</button><button class="stackblitz-button" id="StackBlitzButton-qgcucc8zsocfnsamqxwprm70z05sntj8" onclick="OpenSampleInStackBlitz('https://ej2.syncfusion.com/angular/documentation/samples/ai-assistview/templates/bannerTemplate');"><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-qgcucc8zsocfnsamqxwprm70z05sntj8"></div>

<h2 id="prompt-item-template">Prompt item template</h2>

<p>To customize the appearance of prompt items, use the <a href="../api/ai-assistview#promptitemtemplate">promptItemTemplate</a> with an <code>ng-template</code> directive. The template’s context provides <code>prompt</code>, <code>toolbarItems</code>, and <code>index</code> items for tailored rendering.</p>

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

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

<li role="presentation" class=""><a data-target="#2vfgh06yp0oe985caq36rvesqnpo1xv7-ts" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="app.component.ts" data-original-lang="ts">app.component.ts</a></li>
<li role="presentation" class=""><a data-target="#u07m2g17vace9ui5d57wssd104eak90k-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="2vfgh06yp0oe985caq36rvesqnpo1xv7-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">AIAssistViewModule</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-angular-interactive-chat'</span><span class="p">;</span>

<span class="k">import</span> <span class="p">{</span> <span class="nx">Component</span><span class="p">,</span> <span class="nx">ViewChild</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">AIAssistViewComponent</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-angular-interactive-chat'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">PromptRequestEventArgs</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-interactive-chat'</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">AIAssistViewModule</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 AI AssistView component</span>
    <span class="nx">template</span><span class="o">:</span> <span class="sb">`</span>
<span class="sb">    &lt;div ejs-aiassistview id="prompt-item" #aiAssistViewComponent [prompts]="promptsData" (promptRequest)="onPromptRequest($event)"&gt;</span>
<span class="sb">        &lt;ng-template #promptItemTemplate let-data&gt;</span>
<span class="sb">            &lt;div class="promptItemContent"&gt;</span>
<span class="sb">                &lt;div class="prompt-header"&gt;You</span>
<span class="sb">                    &lt;span class="e-icons e-user"&gt;&lt;/span&gt;</span>
<span class="sb">                &lt;/div&gt;</span>
<span class="sb">                &lt;div class="content"&gt;&lt;/div&gt;</span>
<span class="sb">            &lt;/div&gt;</span>
<span class="sb">        &lt;/ng-template&gt;</span>
<span class="sb">    &lt;/div&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="kd">@ViewChild</span><span class="p">(</span><span class="s1">'aiAssistViewComponent'</span><span class="p">)</span>
    <span class="k">public</span> <span class="nx">aiAssistViewComponent</span><span class="o">!:</span> <span class="nx">AIAssistViewComponent</span><span class="p">;</span>

    <span class="k">public</span> <span class="nx">promptsData</span>  <span class="o">=</span> <span class="p">[</span>
        <span class="p">{</span>
          <span class="nx">prompt</span><span class="o">:</span> <span class="s2">"What is AI?"</span><span class="p">,</span>
          <span class="nx">response</span><span class="o">:</span> <span class="sb">`&lt;div&gt;AI stands for Artificial Intelligence, enabling machines to mimic human intelligence for tasks such as learning, problem-solving, and decision-making.&lt;/div&gt;`</span>
        <span class="p">}</span>
    <span class="p">];</span>

    <span class="k">public</span> <span class="nx">onPromptRequest</span> <span class="o">=</span> <span class="p">(</span><span class="nx">args</span>: <span class="kt">PromptRequestEventArgs</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span>
        <span class="nx">setTimeout</span><span class="p">(()</span> <span class="p">=&gt;</span> <span class="p">{</span>
          <span class="kd">let</span> <span class="nx">foundPrompt</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">promptsData</span><span class="p">.</span><span class="nx">find</span><span class="p">((</span><span class="nx">promptObj</span>: <span class="kt">any</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="nx">promptObj</span><span class="p">.</span><span class="nx">prompt</span> <span class="o">===</span> <span class="nx">args</span><span class="p">.</span><span class="nx">prompt</span><span class="p">);</span>
          <span class="kd">let</span> <span class="nx">defaultResponse</span> <span class="o">=</span> <span class="s1">'For real-time prompt processing, connect the AIAssistView component to your preferred AI service, such as OpenAI or Azure Cognitive Services. Ensure you obtain the necessary API credentials to authenticate and enable seamless integration.'</span><span class="p">;</span>
          <span class="k">this</span><span class="p">.</span><span class="nx">aiAssistViewComponent</span><span class="p">.</span><span class="nx">addPromptResponse</span><span class="p">(</span><span class="nx">foundPrompt</span> <span class="o">?</span> <span class="nx">foundPrompt.response</span> : <span class="kt">defaultResponse</span><span class="p">);</span>
        <span class="p">},</span> <span class="mf">1000</span><span class="p">);</span>
    <span class="p">};</span>

    <span class="k">public</span> <span class="nx">cleanPrompt</span><span class="p">(</span><span class="nx">prompt</span>: <span class="kt">string</span><span class="p">)</span><span class="o">:</span> <span class="kt">string</span> <span class="p">{</span>
        <span class="k">return</span> <span class="nx">prompt</span><span class="p">.</span><span class="nx">replace</span><span class="p">(</span><span class="s1">'&lt;span class="e-icons e-circle-info"&gt;&lt;/span&gt;'</span><span class="p">,</span> <span class="s1">''</span><span class="p">);</span>
    <span class="p">};</span>

<span class="p">}</span></code></pre></div>
</div>


<div role="tabpanel" class="tab-pane" id="u07m2g17vace9ui5d57wssd104eak90k-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="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-txjgiivclt3s9vosaegh023c0g57x7po" onclick="LoadPreviewSample('https://ej2.syncfusion.com/angular/documentation/samples/ai-assistview/templates/promptItemTemplate',this.id);">Preview Sample</button><button class="stackblitz-button" id="StackBlitzButton-txjgiivclt3s9vosaegh023c0g57x7po" onclick="OpenSampleInStackBlitz('https://ej2.syncfusion.com/angular/documentation/samples/ai-assistview/templates/promptItemTemplate');"><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-txjgiivclt3s9vosaegh023c0g57x7po"></div>

<h2 id="response-item-template">Response item template</h2>

<p>The <a href="../api/ai-assistview#responseitemtemplate">responseItemTemplate</a> can be utilized with an <code>ng-template</code> directive to modify the layout of response items. The available context includes <code>prompt</code>, <code>response</code>, <code>index</code>, <code>toolbarItems</code>, and <code>output</code>.</p>

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

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

<li role="presentation" class=""><a data-target="#twz4bji00ex2ygeleekt9d8nfjlz2irt-ts" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="app.component.ts" data-original-lang="ts">app.component.ts</a></li>
<li role="presentation" class=""><a data-target="#dw5gtdjunjqwh5urzyikz9gq4i9jjd6r-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="twz4bji00ex2ygeleekt9d8nfjlz2irt-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">AIAssistViewModule</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-angular-interactive-chat'</span><span class="p">;</span>

<span class="k">import</span> <span class="p">{</span> <span class="nx">Component</span><span class="p">,</span> <span class="nx">ViewChild</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">AIAssistViewComponent</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-angular-interactive-chat'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">PromptRequestEventArgs</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-interactive-chat'</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">AIAssistViewModule</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 AI AssistView component</span>
    <span class="nx">template</span><span class="o">:</span> <span class="sb">`</span>
<span class="sb">    &lt;div ejs-aiassistview id="response-item" #aiAssistViewComponent (promptRequest)="onPromptRequest($event)" [prompts]="promptsData"&gt;</span>
<span class="sb">        &lt;ng-template #responseItemTemplate let-data&gt;</span>
<span class="sb">            &lt;div class="responseItemContent"&gt;</span>
<span class="sb">                &lt;div class="response-header"&gt;</span>
<span class="sb">                    &lt;span class="e-icons e-assistview-icon"&gt;&lt;/span&gt;</span>
<span class="sb">                    AI Assist</span>
<span class="sb">                &lt;/div&gt;</span>
<span class="sb">                &lt;div class="assist-response-content" [innerHTML]='data.response'&gt;&lt;/div&gt;</span>
<span class="sb">            &lt;/div&gt;</span>
<span class="sb">        &lt;/ng-template&gt;</span>
<span class="sb">    &lt;/div&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="kd">@ViewChild</span><span class="p">(</span><span class="s1">'aiAssistViewComponent'</span><span class="p">)</span>
    <span class="k">public</span> <span class="nx">aiAssistViewComponent</span><span class="o">!:</span> <span class="nx">AIAssistViewComponent</span><span class="p">;</span>

    <span class="k">public</span> <span class="nx">promptsData</span> <span class="o">=</span> <span class="p">[</span>
        <span class="p">{</span>
          <span class="nx">prompt</span><span class="o">:</span> <span class="s2">"What is AI?"</span><span class="p">,</span>
          <span class="nx">response</span><span class="o">:</span> <span class="sb">`&lt;div&gt;AI stands for Artificial Intelligence, enabling machines to mimic human intelligence for tasks such as learning, problem-solving, and decision-making.&lt;/div&gt;`</span>
        <span class="p">}</span>
    <span class="p">];</span>

    <span class="k">public</span> <span class="nx">onPromptRequest</span> <span class="o">=</span> <span class="p">(</span><span class="nx">args</span>: <span class="kt">PromptRequestEventArgs</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span>
        <span class="nx">setTimeout</span><span class="p">(()</span> <span class="p">=&gt;</span> <span class="p">{</span>
            <span class="kd">let</span> <span class="nx">foundPrompt</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">promptsData</span><span class="p">.</span><span class="nx">find</span><span class="p">((</span><span class="nx">promptObj</span>: <span class="kt">any</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="nx">promptObj</span><span class="p">.</span><span class="nx">prompt</span> <span class="o">===</span> <span class="nx">args</span><span class="p">.</span><span class="nx">prompt</span><span class="p">);</span>
            <span class="kd">let</span> <span class="nx">defaultResponse</span> <span class="o">=</span> <span class="s1">'For real-time prompt processing, connect the AIAssistView component to your preferred AI service, such as OpenAI or Azure Cognitive Services. Ensure you obtain the necessary API credentials to authenticate and enable seamless integration.'</span><span class="p">;</span>
            <span class="k">this</span><span class="p">.</span><span class="nx">aiAssistViewComponent</span><span class="p">.</span><span class="nx">addPromptResponse</span><span class="p">(</span><span class="nx">foundPrompt</span> <span class="o">?</span> <span class="nx">foundPrompt.response</span> : <span class="kt">defaultResponse</span><span class="p">);</span>
        <span class="p">},</span> <span class="mf">1000</span><span class="p">);</span>
    <span class="p">};</span>

<span class="p">}</span></code></pre></div>
</div>


<div role="tabpanel" class="tab-pane" id="dw5gtdjunjqwh5urzyikz9gq4i9jjd6r-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="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-3gh9zi2mjyg71j9by78hxupvdab5h98s" onclick="LoadPreviewSample('https://ej2.syncfusion.com/angular/documentation/samples/ai-assistview/templates/responseItemTemplate',this.id);">Preview Sample</button><button class="stackblitz-button" id="StackBlitzButton-3gh9zi2mjyg71j9by78hxupvdab5h98s" onclick="OpenSampleInStackBlitz('https://ej2.syncfusion.com/angular/documentation/samples/ai-assistview/templates/responseItemTemplate');"><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-3gh9zi2mjyg71j9by78hxupvdab5h98s"></div>

<h2 id="response-animation-template">Response animation template</h2>

<p>The <a href="../api/ai-assistview#responseanimationtemplate">responseAnimationTemplate</a> property allows a custom loading indicator or animation to be shown while the AI AssistView is generating a response. The animation template is shown in place of the response and removed once the response is added.</p>

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

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

<li role="presentation" class=""><a data-target="#cs1gj41idzticrsbnp6hpu23jv28f08d-ts" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="app.component.ts" data-original-lang="ts">app.component.ts</a></li>
<li role="presentation" class=""><a data-target="#okt025nid6edg0jtb76ekepkxuedpoj7-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="cs1gj41idzticrsbnp6hpu23jv28f08d-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">AIAssistViewModule</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-angular-interactive-chat'</span><span class="p">;</span>

<span class="k">import</span> <span class="p">{</span> <span class="nx">Component</span><span class="p">,</span> <span class="nx">ViewChild</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">AIAssistViewComponent</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-angular-interactive-chat'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">PromptRequestEventArgs</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-interactive-chat'</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">AIAssistViewModule</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 AI AssistView component</span>
    <span class="nx">template</span><span class="o">:</span> <span class="sb">`</span>
<span class="sb">    &lt;div ejs-aiassistview id="response-animation" #aiAssistViewComponent (promptRequest)="onPromptRequest($event)"&gt;</span>
<span class="sb">        &lt;ng-template #responseAnimationTemplate&gt;</span>
<span class="sb">            &lt;div class="assistview-loading-status"&gt;</span>
<span class="sb">                &lt;div class="assistview-grid-icon"&gt;</span>
<span class="sb">                    &lt;span&gt;&lt;/span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;&lt;/span&gt;</span>
<span class="sb">                    &lt;span&gt;&lt;/span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;&lt;/span&gt;</span>
<span class="sb">                    &lt;span&gt;&lt;/span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;&lt;/span&gt;</span>
<span class="sb">                &lt;/div&gt;</span>
<span class="sb">                &lt;span class="assistview-loading-label"&gt;Generating&lt;/span&gt;</span>
<span class="sb">            &lt;/div&gt;</span>
<span class="sb">        &lt;/ng-template&gt;</span>
<span class="sb">    &lt;/div&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="kd">@ViewChild</span><span class="p">(</span><span class="s1">'aiAssistViewComponent'</span><span class="p">)</span>
    <span class="k">public</span> <span class="nx">aiAssistViewComponent</span><span class="o">!:</span> <span class="nx">AIAssistViewComponent</span><span class="p">;</span>

    <span class="k">public</span> <span class="nx">onPromptRequest</span> <span class="o">=</span> <span class="p">(</span><span class="nx">args</span>: <span class="kt">PromptRequestEventArgs</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span>
        <span class="k">return</span> <span class="ow">new</span> <span class="nb">Promise</span><span class="o">&lt;</span><span class="ow">void</span><span class="o">&gt;</span><span class="p">((</span><span class="nx">resolve</span><span class="o">:</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="ow">void</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span>
            <span class="nx">setTimeout</span><span class="p">(()</span> <span class="p">=&gt;</span> <span class="p">{</span>
                <span class="kd">let</span> <span class="nx">defaultResponse</span> <span class="o">=</span> <span class="s1">'For real-time prompt processing, connect the AIAssistView component to your preferred AI service, such as OpenAI or Azure Cognitive Services. Ensure you obtain the necessary API credentials to authenticate and enable seamless integration.'</span><span class="p">;</span>
                <span class="k">this</span><span class="p">.</span><span class="nx">aiAssistViewComponent</span><span class="p">.</span><span class="nx">addPromptResponse</span><span class="p">(</span><span class="nx">defaultResponse</span><span class="p">);</span>
                <span class="nx">resolve</span><span class="p">();</span>
            <span class="p">},</span> <span class="mf">2000</span><span class="p">);</span>
        <span class="p">});</span>
    <span class="p">};</span>
<span class="p">}</span></code></pre></div>
</div>


<div role="tabpanel" class="tab-pane" id="okt025nid6edg0jtb76ekepkxuedpoj7-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-duusfbx2mghii9d3y46bd3qbxife785p" onclick="LoadPreviewSample('https://ej2.syncfusion.com/angular/documentation/samples/ai-assistview/templates/responseAnimation',this.id);">Preview Sample</button><button class="stackblitz-button" id="StackBlitzButton-duusfbx2mghii9d3y46bd3qbxife785p" onclick="OpenSampleInStackBlitz('https://ej2.syncfusion.com/angular/documentation/samples/ai-assistview/templates/responseAnimation');"><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-duusfbx2mghii9d3y46bd3qbxife785p"></div>

<h2 id="prompt-suggestion-item-template">Prompt suggestion item template</h2>

<p>For customizing the prompt suggestion items, the <a href="../api/ai-assistview#promptsuggestionitemtemplate">promptSuggestionItemTemplate</a> can be implemented using an <code>ng-template</code> directive. The context for this template includes the <code>index</code> and <code>promptSuggestion</code> items.</p>

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

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

<li role="presentation" class=""><a data-target="#bmigiuzirsnegtrbh4c70ipfmxunwlhc-ts" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="app.component.ts" data-original-lang="ts">app.component.ts</a></li>
<li role="presentation" class=""><a data-target="#rz1wy1bxb9hilitmdru40qsckofih0l6-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="bmigiuzirsnegtrbh4c70ipfmxunwlhc-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">AIAssistViewModule</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-angular-interactive-chat'</span><span class="p">;</span>

<span class="k">import</span> <span class="p">{</span> <span class="nx">Component</span><span class="p">,</span> <span class="nx">ViewChild</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">AIAssistViewComponent</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-angular-interactive-chat'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">PromptRequestEventArgs</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-interactive-chat'</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">AIAssistViewModule</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 AI AssistView component</span>
    <span class="nx">template</span><span class="o">:</span> <span class="sb">`</span>
<span class="sb">    &lt;div ejs-aiassistview id="suggestions-template" #aiAssistViewComponent (promptRequest)="onPromptRequest($event)" [promptSuggestions]="promptSuggestions"&gt;</span>
<span class="sb">        &lt;ng-template #promptSuggestionItemTemplate let-data&gt;</span>
<span class="sb">            &lt;div class='suggestion-item active'&gt;</span>
<span class="sb">                &lt;span class="e-icons e-circle-info"&gt;&lt;/span&gt;</span>
<span class="sb">                &lt;div class="content"&gt;&lt;/div&gt;</span>
<span class="sb">            &lt;/div&gt;</span>
<span class="sb">        &lt;/ng-template&gt;</span>
<span class="sb">    &lt;/div&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="kd">@ViewChild</span><span class="p">(</span><span class="s1">'aiAssistViewComponent'</span><span class="p">)</span>
    <span class="k">public</span> <span class="nx">aiAssistViewComponent</span><span class="o">!:</span> <span class="nx">AIAssistViewComponent</span><span class="p">;</span>

    <span class="k">public</span> <span class="nx">promptSuggestions</span>: <span class="kt">string</span><span class="p">[]</span> <span class="o">=</span> <span class="p">[</span>
        <span class="s2">"Best practices for clean, maintainable code?"</span><span class="p">,</span>
        <span class="s2">"How to optimize code editor for speed?"</span>
    <span class="p">];</span>

    <span class="k">public</span> <span class="nx">onPromptRequest</span> <span class="o">=</span> <span class="p">(</span><span class="nx">args</span>: <span class="kt">PromptRequestEventArgs</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span>
        <span class="nx">setTimeout</span><span class="p">(()</span> <span class="p">=&gt;</span> <span class="p">{</span>
          <span class="kd">let</span> <span class="nx">response1</span> <span class="o">=</span> <span class="s2">"Use clear naming, break code into small functions, avoid repetition, write tests, and follow coding standards."</span><span class="p">;</span>
          <span class="kd">let</span> <span class="nx">response2</span> <span class="o">=</span> <span class="s2">"Install useful extensions, set up shortcuts, enable linting, and customize settings for smoother development."</span><span class="p">;</span>
          <span class="kd">let</span> <span class="nx">defaultResponse</span> <span class="o">=</span> <span class="s1">'For real-time prompt processing, connect the AIAssistView component to your preferred AI service, such as OpenAI or Azure Cognitive Services. Ensure you obtain the necessary API credentials to authenticate and enable seamless integration.'</span><span class="p">;</span>
          <span class="k">this</span><span class="p">.</span><span class="nx">aiAssistViewComponent</span><span class="p">.</span><span class="nx">addPromptResponse</span><span class="p">(</span><span class="nx">args</span><span class="p">.</span><span class="nx">prompt</span> <span class="o">===</span> <span class="k">this</span><span class="p">.</span><span class="nx">aiAssistViewComponent</span><span class="p">.</span><span class="nx">promptSuggestions</span><span class="p">[</span><span class="mf">0</span><span class="p">]</span> <span class="o">?</span> <span class="nx">response1</span> : <span class="kt">args.prompt</span> <span class="o">===</span> <span class="k">this</span><span class="p">.</span><span class="nx">aiAssistViewComponent</span><span class="p">.</span><span class="nx">promptSuggestions</span><span class="p">[</span><span class="mf">1</span><span class="p">]</span> <span class="o">?</span> <span class="nx">response2</span> : <span class="kt">defaultResponse</span><span class="p">);</span>
        <span class="p">},</span> <span class="mf">1000</span><span class="p">);</span>
    <span class="p">};</span>

<span class="p">}</span></code></pre></div>
</div>


<div role="tabpanel" class="tab-pane" id="rz1wy1bxb9hilitmdru40qsckofih0l6-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="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-mc6dxmnyl9q11kp8vvvqxizniahvtnjo" onclick="LoadPreviewSample('https://ej2.syncfusion.com/angular/documentation/samples/ai-assistview/templates/promptSuggestionItemTemplate',this.id);">Preview Sample</button><button class="stackblitz-button" id="StackBlitzButton-mc6dxmnyl9q11kp8vvvqxizniahvtnjo" onclick="OpenSampleInStackBlitz('https://ej2.syncfusion.com/angular/documentation/samples/ai-assistview/templates/promptSuggestionItemTemplate');"><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-mc6dxmnyl9q11kp8vvvqxizniahvtnjo"></div>

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

<p>The <a href="../api/ai-assistview#footertemplate">footerTemplate</a> property offers a way to replace the default footer and manage prompt request actions. This enables the creation of unique footers that can include custom functionalities, such as a character counter or a button to clear the conversation.</p>

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

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

<li role="presentation" class=""><a data-target="#kb3628s4xy8luizaiwepmjstaoy8oaqr-ts" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="app.component.ts" data-original-lang="ts">app.component.ts</a></li>
<li role="presentation" class=""><a data-target="#pjisofntty2tq8y56o9s8mxmca3vnm2r-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="kb3628s4xy8luizaiwepmjstaoy8oaqr-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">AIAssistViewModule</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-angular-interactive-chat'</span><span class="p">;</span>

<span class="k">import</span> <span class="p">{</span> <span class="nx">Component</span><span class="p">,</span> <span class="nx">ViewChild</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">AIAssistViewComponent</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-angular-interactive-chat'</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">AIAssistViewModule</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 AI AssistView component</span>
    <span class="nx">template</span><span class="o">:</span> <span class="sb">`</span>
<span class="sb">    &lt;div ejs-aiassistview id="footer-template" #aiAssistViewComponent&gt;</span>
<span class="sb">        &lt;ng-template #footerTemplate&gt;</span>
<span class="sb">            &lt;div class="custom-footer"&gt;</span>
<span class="sb">                &lt;textarea id="promptTextArea" class="e-input" rows="2" placeholder="Enter your prompt here"&gt;&lt;/textarea&gt;</span>
<span class="sb">                &lt;button id="sendPrompt" class="e-btn e-primary" (click)="buttonClick()"&gt;Generate&lt;/button&gt;</span>
<span class="sb">            &lt;/div&gt;</span>
<span class="sb">        &lt;/ng-template&gt;</span>
<span class="sb">    &lt;/div&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="kd">@ViewChild</span><span class="p">(</span><span class="s1">'aiAssistViewComponent'</span><span class="p">)</span>
    <span class="k">public</span> <span class="nx">aiAssistViewComponent</span><span class="o">!:</span> <span class="nx">AIAssistViewComponent</span><span class="p">;</span>

    <span class="k">public</span> <span class="nx">buttonClick</span> <span class="o">=</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span>
        <span class="kd">const</span> <span class="nx">textArea</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'promptTextArea'</span><span class="p">)</span> <span class="kr">as</span> <span class="nx">HTMLTextAreaElement</span><span class="p">;</span>
        <span class="k">if</span> <span class="p">(</span><span class="nx">textArea</span><span class="p">)</span> <span class="p">{</span>
          <span class="nx">textArea</span><span class="p">.</span><span class="nx">value</span> <span class="o">=</span> <span class="s1">''</span><span class="p">;</span>
          <span class="kd">let</span> <span class="nx">defaultResponse</span> <span class="o">=</span> <span class="s1">'For real-time prompt processing, connect the AIAssistView component to your preferred AI service, such as OpenAI or Azure Cognitive Services. Ensure you obtain the necessary API credentials to authenticate and enable seamless integration.'</span><span class="p">;</span>
          <span class="k">this</span><span class="p">.</span><span class="nx">aiAssistViewComponent</span><span class="p">.</span><span class="nx">addPromptResponse</span><span class="p">(</span><span class="nx">defaultResponse</span><span class="p">);</span>
        <span class="p">}</span>
    <span class="p">};</span>

<span class="p">}</span></code></pre></div>
</div>


<div role="tabpanel" class="tab-pane" id="pjisofntty2tq8y56o9s8mxmca3vnm2r-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="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-iqb1017fa7vluh4ihlmw1n33ywfts8rs" onclick="LoadPreviewSample('https://ej2.syncfusion.com/angular/documentation/samples/ai-assistview/templates/footerTemplate',this.id);">Preview Sample</button><button class="stackblitz-button" id="StackBlitzButton-iqb1017fa7vluh4ihlmw1n33ywfts8rs" onclick="OpenSampleInStackBlitz('https://ej2.syncfusion.com/angular/documentation/samples/ai-assistview/templates/footerTemplate');"><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-iqb1017fa7vluh4ihlmw1n33ywfts8rs"></div>
</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';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Customize specific menu items

Angular Context Menu 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.

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';
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 Angular Context Menu 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 Angular Context Menu structure.

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';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

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

See Also