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="template-in-angular-file-upload">Template in Angular File Upload</h1>

<p>You can customize the Angular File Upload’s appearance using templates and custom buttons.</p>

<h2 id="file-list-template">File list template</h2>

<p>The <code>template</code> property customizes the appearance of each file in the list. You can provide an HTML element or string template. Selected or dropped files display according to your template layout. Remove and progress bar actions are handled through corresponding events when a template is defined.</p>

<p>For example, you can display a file type icon along with the default UI elements.</p>

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

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

<li role="presentation" class=""><a data-target="#3vrmfkn8m78nndfkjal57s0qoifqg5lc-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="#3gzgrz9coxjwnfdrbueznvunss82js8p-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="3vrmfkn8m78nndfkjal57s0qoifqg5lc-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">UploaderModule</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-angular-inputs'</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">detach</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-base'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">UploaderComponent</span><span class="p">,</span> <span class="nx">FileInfo</span><span class="p">,</span> <span class="nx">SelectedEventArgs</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-angular-inputs'</span><span class="p">;</span>

<span class="cm">/**</span>
<span class="cm"> * Uploader Custom Template sample</span>
<span class="cm"> */</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">UploaderModule</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="nx">template</span><span class="o">:</span> <span class="sb">`&lt;div id='dropArea'&gt;&lt;span id='drop' class="droparea"&gt; Drop files here or &lt;a href="" id='browse'&gt;&lt;u&gt;Browse&lt;/u&gt;&lt;/a&gt; &lt;/span&gt;</span>
<span class="sb">    &lt;ejs-uploader #defaultupload autoUpload='false'  [asyncSettings]='path' (selected)="onSelect($event)" (failure)="onuploadFailed($event)" (progress)="onFileUpload($event)" (success)="onuploadSuccess($event)"&gt;</span>
<span class="sb">    &lt;ng-template #template let-data=""&gt;</span>
<span class="sb">          &lt;span class='wrapper'&gt;&lt;span class='icon sf-icon-'&gt;&lt;/span&gt;</span>
<span class="sb">          &lt;span class='name file-name'&gt;&lt;/span&gt;&lt;/span&gt;</span>
<span class="sb">          &lt;span class='file-size-td file-size'&gt; bytes&lt;/span&gt;</span>
<span class="sb">          &lt;span class='e-icons e-file-remove-btn' title='Remove'&gt;&lt;/span&gt; &lt;br/&gt;</span>
<span class="sb">          &lt;progress id='progressBar' class='progressbar' value='0' max='100'&gt;&lt;/progress&gt;</span>
<span class="sb">          &lt;span class='percent-td percent'&gt;&lt;/span&gt;</span>
<span class="sb">      &lt;/ng-template&gt;</span>
<span class="sb">&lt;/ejs-uploader&gt;</span>
<span class="sb">    &lt;/div&gt; `</span><span class="p">,</span>
    <span class="c1">// styleUrls: ['./index.css']</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">'defaultupload'</span><span class="p">)</span>
    <span class="k">public</span> <span class="nx">uploadObj?</span>: <span class="kt">UploaderComponent</span><span class="p">;</span>
    <span class="k">public</span> <span class="nx">path</span>: <span class="kt">Object</span> <span class="o">=</span> <span class="p">{</span>
      <span class="nx">saveUrl</span><span class="o">:</span> <span class="s1">'https://services.syncfusion.com/angular/production/api/FileUploader/Save'</span><span class="p">,</span>
      <span class="nx">removeUrl</span><span class="o">:</span> <span class="s1">'https://services.syncfusion.com/angular/production/api/FileUploader/Remove'</span> <span class="p">};</span>
    <span class="kr">constructor</span><span class="p">()</span> <span class="p">{</span>
    <span class="p">}</span>
     <span class="nx">ngAfterViewInit</span><span class="p">()</span> <span class="p">{</span>
      <span class="p">(</span><span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'browse'</span><span class="p">)</span> <span class="kr">as</span> <span class="nx">HTMLElement</span><span class="p">).</span><span class="nx">onclick</span> <span class="o">=</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
      <span class="p">(</span><span class="nb">document</span><span class="p">.</span><span class="nx">getElementsByClassName</span><span class="p">(</span><span class="s1">'e-file-select-wrap'</span><span class="p">)[</span><span class="mf">0</span><span class="p">].</span><span class="nx">querySelector</span><span class="p">(</span><span class="s1">'button'</span><span class="p">)</span> <span class="kr">as</span> <span class="nx">HTMLButtonElement</span><span class="p">).</span><span class="nx">click</span><span class="p">();</span>
        <span class="k">return</span> <span class="kc">false</span><span class="p">;</span>
      <span class="p">}</span>
      <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'dropArea'</span><span class="p">)</span><span class="o">!</span><span class="p">.</span><span class="nx">onclick</span> <span class="o">=</span> <span class="p">(</span><span class="nx">e</span>: <span class="kt">any</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span>
            <span class="kd">let</span> <span class="nx">target</span>: <span class="kt">HTMLElement</span> <span class="o">=</span> <span class="o">&lt;</span><span class="nx">HTMLElement</span><span class="o">&gt;</span><span class="nx">e</span><span class="p">.</span><span class="nx">target</span><span class="p">;</span>
            <span class="k">if</span> <span class="p">(</span><span class="nx">target</span><span class="p">.</span><span class="nx">classList</span><span class="p">.</span><span class="nx">contains</span><span class="p">(</span><span class="s1">'e-file-delete-btn'</span><span class="p">))</span> <span class="p">{</span>
                <span class="k">for</span> <span class="p">(</span><span class="kd">let</span> <span class="nx">i</span>: <span class="kt">number</span> <span class="o">=</span> <span class="mf">0</span><span class="p">;</span> <span class="nx">i</span> <span class="o">&lt;</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">uploadObj</span> <span class="kr">as</span> <span class="nx">UploaderComponent</span><span class="p">).</span><span class="nx">getFilesData</span><span class="p">().</span><span class="nx">length</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span>
                    <span class="k">if</span> <span class="p">((</span><span class="nx">target</span><span class="p">.</span><span class="nx">closest</span><span class="p">(</span><span class="s1">'li'</span><span class="p">)</span> <span class="kr">as</span> <span class="nx">HTMLLIElement</span><span class="p">).</span><span class="nx">getAttribute</span><span class="p">(</span><span class="s1">'data-file-name'</span><span class="p">)</span> <span class="o">===</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">uploadObj</span> <span class="kr">as</span> <span class="nx">UploaderComponent</span><span class="p">).</span><span class="nx">getFilesData</span><span class="p">()[</span><span class="nx">i</span><span class="p">].</span><span class="nx">name</span><span class="p">)</span> <span class="p">{</span>
                        <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">uploadObj</span> <span class="kr">as</span> <span class="nx">UploaderComponent</span><span class="p">).</span><span class="nx">remove</span><span class="p">((</span><span class="k">this</span><span class="p">.</span><span class="nx">uploadObj</span> <span class="kr">as</span> <span class="nx">UploaderComponent</span><span class="p">).</span><span class="nx">getFilesData</span><span class="p">()[</span><span class="nx">i</span><span class="p">]);</span>
                    <span class="p">}</span>
                <span class="p">}</span>
            <span class="p">}</span>
            <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nx">target</span><span class="p">.</span><span class="nx">classList</span><span class="p">.</span><span class="nx">contains</span><span class="p">(</span><span class="s1">'e-file-remove-btn'</span><span class="p">))</span> <span class="p">{</span>
                <span class="nx">detach</span><span class="p">(</span><span class="nx">target</span><span class="p">.</span><span class="nx">closest</span><span class="p">(</span><span class="s1">'li'</span><span class="p">)</span> <span class="kr">as</span> <span class="nx">HTMLLIElement</span><span class="p">);</span>
            <span class="p">}</span>
        <span class="p">}</span>
    <span class="p">}</span>
   <span class="k">public</span> <span class="nx">parentElement</span> <span class="nx">?</span>: <span class="kt">HTMLElement</span><span class="p">;</span>
    <span class="k">public</span> <span class="nx">progressbarContainer</span> <span class="nx">?</span>: <span class="kt">HTMLElement</span><span class="p">;</span>
    <span class="k">public</span> <span class="nx">filesDetails</span> : <span class="kt">FileInfo</span><span class="p">[]</span> <span class="o">=</span> <span class="p">[];</span>
    <span class="k">public</span> <span class="nx">filesList</span>: <span class="kt">HTMLElement</span><span class="p">[]</span> <span class="o">=</span> <span class="p">[];</span>
    <span class="k">public</span> <span class="nx">dropElement</span>: <span class="kt">HTMLElement</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementsByClassName</span><span class="p">(</span><span class="s1">'control-fluid'</span><span class="p">)[</span><span class="mf">0</span><span class="p">]</span> <span class="kr">as</span> <span class="nx">HTMLElement</span><span class="p">;</span>
    <span class="k">public</span> <span class="nx">onFileUpload</span><span class="p">(</span><span class="nx">args</span>: <span class="kt">any</span><span class="p">)</span> <span class="p">{</span>
    <span class="kd">let</span> <span class="nx">li</span>: <span class="kt">HTMLElement</span> <span class="o">=</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">uploadObj</span> <span class="kr">as</span> <span class="nx">any</span><span class="p">)</span><span class="o">!</span><span class="p">.</span><span class="nx">uploadWrapper</span><span class="o">?</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="s1">'[data-file-name="'</span> <span class="o">+</span> <span class="nx">args</span><span class="p">.</span><span class="nx">file</span><span class="p">.</span><span class="nx">name</span> <span class="o">+</span> <span class="s1">'"]'</span><span class="p">);</span>
    <span class="kd">let</span> <span class="nx">progressValue</span>: <span class="kt">number</span> <span class="o">=</span> <span class="nb">Math</span><span class="p">.</span><span class="nx">round</span><span class="p">((</span><span class="nx">args</span><span class="p">.</span><span class="nx">e</span><span class="p">.</span><span class="nx">loaded</span> <span class="o">/</span> <span class="nx">args</span><span class="p">.</span><span class="nx">e</span><span class="p">.</span><span class="nx">total</span><span class="p">)</span> <span class="o">*</span> <span class="mf">100</span><span class="p">);</span>
    <span class="nx">li</span><span class="p">.</span><span class="nx">getElementsByTagName</span><span class="p">(</span><span class="s1">'progress'</span><span class="p">)[</span><span class="mf">0</span><span class="p">].</span><span class="nx">value</span> <span class="o">=</span> <span class="nx">progressValue</span><span class="p">;</span>
    <span class="nx">li</span><span class="p">.</span><span class="nx">getElementsByClassName</span><span class="p">(</span><span class="s1">'percent'</span><span class="p">)[</span><span class="mf">0</span><span class="p">].</span><span class="nx">textContent</span> <span class="o">=</span> <span class="nx">progressValue</span><span class="p">.</span><span class="nx">toString</span><span class="p">()</span> <span class="o">+</span> <span class="s2">" %"</span><span class="p">;</span>
  <span class="p">}</span>
  <span class="k">public</span> <span class="nx">onuploadSuccess</span><span class="p">(</span><span class="nx">args</span>: <span class="kt">any</span><span class="p">)</span> <span class="p">{</span>
    <span class="k">if</span> <span class="p">(</span><span class="nx">args</span><span class="p">.</span><span class="nx">operation</span> <span class="o">===</span> <span class="s1">'remove'</span><span class="p">)</span> <span class="p">{</span>
        <span class="kd">let</span> <span class="nx">height</span>: <span class="kt">string</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">'dropArea'</span><span class="p">)</span><span class="o">!</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">height</span><span class="p">;</span>
        <span class="nx">height</span> <span class="o">=</span> <span class="p">(</span><span class="nb">parseInt</span><span class="p">(</span><span class="nx">height</span><span class="p">)</span> <span class="o">-</span> <span class="mf">40</span><span class="p">)</span> <span class="o">+</span> <span class="s1">'px'</span><span class="p">;</span>
        <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'dropArea'</span><span class="p">)</span><span class="o">!</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">height</span> <span class="o">=</span> <span class="nx">height</span><span class="p">;</span>
    <span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
        <span class="kd">let</span> <span class="nx">li</span>: <span class="kt">HTMLElement</span> <span class="o">=</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">uploadObj</span> <span class="kr">as</span> <span class="nx">any</span><span class="p">).</span><span class="nx">uploadWrapper</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="s1">'[data-file-name="'</span> <span class="o">+</span> <span class="nx">args</span><span class="p">.</span><span class="nx">file</span><span class="p">.</span><span class="nx">name</span> <span class="o">+</span> <span class="s1">'"]'</span><span class="p">);</span>
        <span class="kd">let</span> <span class="nx">progressBar</span>: <span class="kt">HTMLElement</span> <span class="o">=</span> <span class="nx">li</span><span class="p">.</span><span class="nx">getElementsByTagName</span><span class="p">(</span><span class="s1">'progress'</span><span class="p">)[</span><span class="mf">0</span><span class="p">];</span>
        <span class="nx">progressBar</span><span class="p">.</span><span class="nx">classList</span><span class="p">.</span><span class="nx">add</span><span class="p">(</span><span class="s1">'e-upload-success'</span><span class="p">);</span>
        <span class="nx">li</span><span class="p">.</span><span class="nx">getElementsByClassName</span><span class="p">(</span><span class="s1">'percent'</span><span class="p">)[</span><span class="mf">0</span><span class="p">].</span><span class="nx">classList</span><span class="p">.</span><span class="nx">add</span><span class="p">(</span><span class="s1">'e-upload-success'</span><span class="p">);</span>
        <span class="kd">let</span> <span class="nx">height</span>: <span class="kt">string</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">'dropArea'</span><span class="p">)</span><span class="o">!</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">height</span><span class="p">;</span>
        <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'dropArea'</span><span class="p">)</span><span class="o">!</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">height</span> <span class="o">=</span> <span class="nb">parseInt</span><span class="p">(</span><span class="nx">height</span><span class="p">)</span> <span class="o">-</span> <span class="mf">15</span> <span class="o">+</span> <span class="s1">'px'</span><span class="p">;</span>
    <span class="p">}</span>
<span class="p">}</span>
<span class="k">public</span> <span class="nx">onuploadFailed</span><span class="p">(</span><span class="nx">args</span>: <span class="kt">any</span><span class="p">)</span> <span class="p">{</span>
    <span class="kd">let</span> <span class="nx">li</span>: <span class="kt">HTMLElement</span> <span class="o">=</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">uploadObj</span> <span class="kr">as</span> <span class="nx">any</span><span class="p">).</span><span class="nx">uploadWrapper</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="s1">'[data-file-name="'</span> <span class="o">+</span> <span class="nx">args</span><span class="p">.</span><span class="nx">file</span><span class="p">.</span><span class="nx">name</span> <span class="o">+</span> <span class="s1">'"]'</span><span class="p">);</span>
    <span class="kd">let</span> <span class="nx">progressBar</span>: <span class="kt">HTMLElement</span> <span class="o">=</span> <span class="nx">li</span><span class="p">.</span><span class="nx">getElementsByTagName</span><span class="p">(</span><span class="s1">'progress'</span><span class="p">)[</span><span class="mf">0</span><span class="p">];</span>
    <span class="nx">progressBar</span><span class="p">.</span><span class="nx">classList</span><span class="p">.</span><span class="nx">add</span><span class="p">(</span><span class="s1">'e-upload-failed'</span><span class="p">);</span>
    <span class="nx">li</span><span class="p">.</span><span class="nx">getElementsByClassName</span><span class="p">(</span><span class="s1">'percent'</span><span class="p">)[</span><span class="mf">0</span><span class="p">].</span><span class="nx">classList</span><span class="p">.</span><span class="nx">add</span><span class="p">(</span><span class="s1">'e-upload-failed'</span><span class="p">);</span>
<span class="p">}</span>
<span class="k">public</span> <span class="nx">onSelect</span><span class="p">(</span><span class="nx">args</span>: <span class="kt">SelectedEventArgs</span><span class="p">)</span> <span class="p">{</span>
    <span class="kd">let</span> <span class="nx">length</span>: <span class="kt">number</span> <span class="o">=</span> <span class="nx">args</span><span class="p">.</span><span class="nx">filesData</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span>
    <span class="kd">let</span> <span class="nx">height</span>: <span class="kt">string</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">'dropArea'</span><span class="p">)</span><span class="o">!</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">height</span><span class="p">;</span>
    <span class="nx">height</span> <span class="o">=</span> <span class="nb">parseInt</span><span class="p">(</span><span class="nx">height</span><span class="p">)</span> <span class="o">+</span> <span class="p">(</span><span class="nx">length</span> <span class="o">*</span> <span class="mf">55</span><span class="p">)</span> <span class="o">+</span> <span class="s1">'px'</span><span class="p">;</span>
    <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'dropArea'</span><span class="p">)</span><span class="o">!</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">height</span> <span class="o">=</span> <span class="nx">height</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span></code></pre></div>
</div>


<div role="tabpanel" class="tab-pane" id="3gzgrz9coxjwnfdrbueznvunss82js8p-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-wcat9gx5wlrj0puqioqs5leb5784grk0" onclick="LoadPreviewSample('https://ej2.syncfusion.com/angular/documentation/samples/uploader/template-cs1',this.id);">Preview Sample</button><button class="stackblitz-button" id="StackBlitzButton-wcat9gx5wlrj0puqioqs5leb5784grk0" onclick="OpenSampleInStackBlitz('https://ej2.syncfusion.com/angular/documentation/samples/uploader/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-wcat9gx5wlrj0puqioqs5leb5784grk0"></div>

<h2 id="custom-template">Custom template</h2>

<p>You can create a completely custom template by hiding the default file list and buttons.<br>
Set the <code>showFileList</code> property to control whether to display the default or custom file list. When using a custom template for upload or remove operations, pass <code>true</code> as the second parameter to the <code>upload</code> and <code>remove</code> methods:</p>

<ul>
  <li><code>this.uploadObj.upload(filesData, true);</code></li>
  <li><code>this.uploadObj.remove(filesData, true);</code></li>
</ul>

<p>The following example demonstrates the implementation:</p>

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

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

<li role="presentation" class=""><a data-target="#6as2a4ecd1r9ac8owcnmq3jck08pzj5e-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="#f8arq4x54i4af82n6ommrs2uacql6eug-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="6as2a4ecd1r9ac8owcnmq3jck08pzj5e-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">UploaderModule</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-angular-inputs'</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">EmitType</span><span class="p">,</span> <span class="nx">detach</span><span class="p">,</span> <span class="nx">isNullOrUndefined</span><span class="p">,</span> <span class="nx">createElement</span><span class="p">,</span> <span class="nx">EventHandler</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-base'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">UploaderComponent</span><span class="p">,</span> <span class="nx">FileInfo</span><span class="p">,</span> <span class="nx">SelectedEventArgs</span><span class="p">,</span> <span class="nx">RemovingEventArgs</span>  <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-angular-inputs'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">createSpinner</span><span class="p">,</span> <span class="nx">showSpinner</span><span class="p">,</span> <span class="nx">hideSpinner</span>  <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-popups'</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">UploaderModule</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="nx">template</span><span class="o">:</span> <span class="sb">`&lt;div id='dropArea'&gt;</span>
<span class="sb">                    &lt;span id='drop' class="droparea"&gt; Drop files here or &lt;a href="" id='browse'&gt;&lt;u&gt;Browse&lt;/u&gt;&lt;/a&gt; &lt;/span&gt;</span>
<span class="sb">                    &lt;ejs-uploader #templateupload id='templatefileupload' [dropArea]="dropArea" [asyncSettings]='path'(progress)='onFileUpload($event)' (selected)='onFileSelect($event)' (removing)='onFileRemove($event)' (failure)='onUploadFailed($event)' (success)='onUploadSuccess($event)'&gt;&lt;/ejs-uploader&gt;</span>
<span class="sb">                &lt;/div&gt;`</span><span class="p">,</span>
    <span class="nx">styleUrls</span><span class="o">:</span> <span class="p">[</span><span class="s1">'./index.css'</span><span class="p">]</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">'templateupload'</span><span class="p">)</span>
    <span class="k">public</span> <span class="nx">uploadObj?</span>: <span class="kt">UploaderComponent</span><span class="p">;</span>

    <span class="k">public</span> <span class="nx">path</span>: <span class="kt">Object</span> <span class="o">=</span> <span class="p">{</span>
        <span class="nx">saveUrl</span><span class="o">:</span> <span class="s1">'https://services.syncfusion.com/angular/production/api/FileUploader/Save'</span><span class="p">,</span>
        <span class="nx">removeUrl</span><span class="o">:</span> <span class="s1">'https://services.syncfusion.com/angular/production/api/FileUploader/Remove'</span>
    <span class="p">};</span>

    <span class="nx">ngAfterViewInit</span><span class="p">()</span> <span class="p">{</span>
    <span class="k">this</span><span class="p">.</span><span class="nx">dropArea</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="s1">'#dropArea'</span><span class="p">)</span> <span class="kr">as</span> <span class="nx">HTMLElement</span><span class="p">;</span>
    <span class="p">(</span><span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'browse'</span><span class="p">)</span> <span class="kr">as</span> <span class="nx">HTMLElement</span><span class="p">).</span><span class="nx">onclick</span> <span class="o">=</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
    <span class="p">(</span><span class="nb">document</span><span class="p">.</span><span class="nx">getElementsByClassName</span><span class="p">(</span><span class="s1">'e-file-select-wrap'</span><span class="p">)[</span><span class="mf">0</span><span class="p">].</span><span class="nx">querySelector</span><span class="p">(</span><span class="s1">'button'</span><span class="p">)</span> <span class="kr">as</span> <span class="nx">HTMLButtonElement</span><span class="p">).</span><span class="nx">click</span><span class="p">();</span>
      <span class="k">return</span> <span class="kc">false</span><span class="p">;</span>
      <span class="p">}</span>
    <span class="p">}</span>
    <span class="kr">constructor</span><span class="p">()</span> <span class="p">{</span>
    <span class="p">}</span>
    <span class="k">public</span> <span class="nx">dropArea?</span>: <span class="kt">HTMLElement</span><span class="p">;</span>
    <span class="k">public</span> <span class="nx">uploadWrapper</span>: <span class="kt">HTMLElement</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementsByClassName</span><span class="p">(</span><span class="s1">'e-upload'</span><span class="p">)[</span><span class="mf">0</span><span class="p">]</span> <span class="kr">as</span> <span class="nx">HTMLElement</span><span class="p">;</span>
    <span class="k">public</span> <span class="nx">parentElement</span> <span class="nx">?</span>: <span class="kt">HTMLElement</span><span class="p">;</span>
    <span class="k">public</span> <span class="nx">progressbarContainer</span> <span class="nx">?</span>: <span class="kt">HTMLElement</span><span class="p">;</span>
    <span class="k">public</span> <span class="nx">filesDetails</span> : <span class="kt">FileInfo</span><span class="p">[]</span> <span class="o">=</span> <span class="p">[];</span>
    <span class="k">public</span> <span class="nx">filesList</span>: <span class="kt">HTMLElement</span><span class="p">[]</span> <span class="o">=</span> <span class="p">[];</span>
    <span class="k">public</span> <span class="nx">onFileSelect</span><span class="p">(</span><span class="nx">args</span> : <span class="kt">SelectedEventArgs</span><span class="p">)</span> <span class="o">:</span> <span class="ow">void</span>  <span class="p">{</span>
        <span class="k">if</span> <span class="p">(</span><span class="nx">isNullOrUndefined</span><span class="p">((</span><span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'dropArea'</span><span class="p">)</span> <span class="kr">as</span> <span class="nx">HTMLElement</span><span class="p">).</span><span class="nx">querySelector</span><span class="p">(</span><span class="s1">'.upload-list-root'</span><span class="p">)</span> <span class="kr">as</span> <span class="nx">Element</span> <span class="p">))</span> <span class="p">{</span>
            <span class="k">this</span><span class="p">.</span><span class="nx">parentElement</span> <span class="o">=</span> <span class="nx">createElement</span><span class="p">(</span><span class="s1">'div'</span><span class="p">,</span> <span class="p">{</span> <span class="nx">className</span><span class="o">:</span> <span class="s1">'upload-list-root'</span> <span class="p">});</span>
            <span class="k">this</span><span class="p">.</span><span class="nx">parentElement</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span><span class="nx">createElement</span><span class="p">(</span><span class="s1">'ul'</span><span class="p">,</span> <span class="p">{</span><span class="nx">className</span><span class="o">:</span> <span class="s1">'ul-element'</span> <span class="p">}));</span>
            <span class="p">(</span><span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'dropArea'</span><span class="p">)</span> <span class="kr">as</span> <span class="nx">HTMLElement</span><span class="p">).</span><span class="nx">appendChild</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">parentElement</span><span class="p">);</span>
        <span class="p">}</span>
        <span class="k">for</span> <span class="p">(</span><span class="kd">let</span> <span class="nx">i</span> : <span class="kt">number</span> <span class="o">=</span> <span class="mf">0</span><span class="p">;</span> <span class="nx">i</span> <span class="o">&lt;</span> <span class="nx">args</span><span class="p">.</span><span class="nx">filesData</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span>
            <span class="k">this</span><span class="p">.</span><span class="nx">formSelectedData</span><span class="p">(</span><span class="nx">args</span><span class="p">.</span><span class="nx">filesData</span><span class="p">[</span><span class="nx">i</span><span class="p">],</span> <span class="k">this</span><span class="p">);</span>  <span class="c1">// create the LI element for each file Data</span>
        <span class="p">}</span>
        <span class="k">this</span><span class="p">.</span><span class="nx">filesDetails</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">filesDetails</span><span class="p">.</span><span class="nx">concat</span><span class="p">(</span><span class="nx">args</span><span class="p">.</span><span class="nx">filesData</span><span class="p">);</span>
        <span class="k">this</span><span class="p">.</span><span class="nx">uploadObj</span><span class="o">?</span><span class="p">.</span><span class="nx">upload</span><span class="p">(</span><span class="nx">args</span><span class="p">.</span><span class="nx">filesData</span><span class="p">,</span> <span class="kc">true</span><span class="p">);</span>
        <span class="nx">args</span><span class="p">.</span><span class="nx">cancel</span> <span class="o">=</span> <span class="kc">true</span><span class="p">;</span>
    <span class="p">}</span>
     <span class="k">public</span> <span class="nx">formSelectedData</span> <span class="p">(</span><span class="nx">selectedFiles</span> : <span class="kt">FileInfo</span><span class="p">,</span> <span class="nx">proxy</span>: <span class="kt">any</span> <span class="p">)</span> <span class="o">:</span> <span class="ow">void</span> <span class="p">{</span>
        <span class="kd">let</span> <span class="nx">liEle</span> : <span class="kt">HTMLElement</span> <span class="o">=</span> <span class="nx">createElement</span><span class="p">(</span><span class="s1">'li'</span><span class="p">,</span>  <span class="p">{</span> <span class="nx">className</span><span class="o">:</span> <span class="s1">'file-lists'</span><span class="p">,</span> <span class="nx">attrs</span><span class="o">:</span> <span class="p">{</span><span class="s1">'data-file-name'</span> <span class="o">:</span> <span class="nx">selectedFiles</span><span class="p">.</span><span class="nx">name</span><span class="p">}</span> <span class="p">});</span>
        <span class="nx">liEle</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span><span class="nx">createElement</span><span class="p">(</span><span class="s1">'span'</span><span class="p">,</span> <span class="p">{</span><span class="nx">className</span><span class="o">:</span> <span class="s1">'file-name '</span><span class="p">,</span> <span class="nx">innerHTML</span>: <span class="kt">selectedFiles.name</span> <span class="p">}));</span>
        <span class="nx">liEle</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span><span class="nx">createElement</span><span class="p">(</span><span class="s1">'span'</span><span class="p">,</span> <span class="p">{</span><span class="nx">className</span><span class="o">:</span> <span class="s1">'file-size '</span><span class="p">,</span> <span class="nx">innerHTML</span><span class="o">:</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">uploadObj</span> <span class="kr">as</span> <span class="nx">UploaderComponent</span><span class="p">).</span><span class="nx">bytesToSize</span><span class="p">(</span><span class="nx">selectedFiles</span><span class="p">.</span><span class="nx">size</span><span class="p">)</span> <span class="p">}));</span>
        <span class="k">if</span> <span class="p">(</span><span class="nx">selectedFiles</span><span class="p">.</span><span class="nx">status</span> <span class="o">===</span> <span class="s1">'Ready to upload'</span><span class="p">)</span> <span class="p">{</span>
            <span class="k">this</span><span class="p">.</span><span class="nx">progressbarContainer</span> <span class="o">=</span> <span class="nx">createElement</span><span class="p">(</span><span class="s1">'span'</span><span class="p">,</span> <span class="p">{</span><span class="nx">className</span><span class="o">:</span> <span class="s1">'progress-bar-container'</span><span class="p">});</span>
            <span class="k">this</span><span class="p">.</span><span class="nx">progressbarContainer</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span><span class="nx">createElement</span><span class="p">(</span><span class="s1">'progress'</span><span class="p">,</span> <span class="p">{</span><span class="nx">className</span><span class="o">:</span> <span class="s1">'progress'</span><span class="p">,</span> <span class="nx">attrs</span><span class="o">:</span> <span class="p">{</span><span class="nx">value</span> <span class="o">:</span> <span class="s1">'0'</span><span class="p">,</span> <span class="nx">max</span> <span class="o">:</span> <span class="s1">'100'</span><span class="p">}}</span> <span class="p">));</span>
            <span class="nx">liEle</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">progressbarContainer</span><span class="p">);</span>
        <span class="p">}</span> <span class="k">else</span> <span class="p">{</span> <span class="p">(</span><span class="nx">liEle</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="s1">'.file-name'</span><span class="p">)</span> <span class="kr">as</span> <span class="nx">Element</span><span class="p">).</span><span class="nx">classList</span><span class="p">.</span><span class="nx">add</span><span class="p">(</span><span class="s1">'upload-fails'</span><span class="p">);</span> <span class="p">}</span>
        <span class="kd">let</span> <span class="nx">closeIconContainer</span> : <span class="kt">HTMLElement</span> <span class="o">=</span> <span class="nx">createElement</span><span class="p">(</span><span class="s1">'span'</span><span class="p">,</span> <span class="p">{</span><span class="nx">className</span><span class="o">:</span> <span class="s1">'e-icons close-icon-container'</span><span class="p">});</span>
        <span class="nx">EventHandler</span><span class="p">.</span><span class="nx">add</span><span class="p">(</span><span class="nx">closeIconContainer</span><span class="p">,</span> <span class="s1">'click'</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">removeFiles</span><span class="p">,</span> <span class="nx">proxy</span><span class="p">);</span>
        <span class="nx">liEle</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span><span class="nx">closeIconContainer</span><span class="p">);</span>
        <span class="p">(</span><span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="s1">'.ul-element'</span><span class="p">)</span> <span class="kr">as</span> <span class="nx">Element</span><span class="p">).</span><span class="nx">appendChild</span><span class="p">(</span><span class="nx">liEle</span><span class="p">);</span>
        <span class="k">this</span><span class="p">.</span><span class="nx">filesList</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">liEle</span><span class="p">);</span>
    <span class="p">}</span>

    <span class="k">public</span> <span class="nx">onFileUpload</span><span class="p">(</span><span class="nx">args</span> : <span class="kt">any</span><span class="p">)</span> <span class="o">:</span> <span class="ow">void</span> <span class="p">{</span>
        <span class="kd">let</span> <span class="nx">li</span>: <span class="kt">Element</span> <span class="o">=</span> <span class="p">(</span><span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'dropArea'</span><span class="p">)</span> <span class="kr">as</span> <span class="nx">HTMLElement</span><span class="p">).</span><span class="nx">querySelector</span><span class="p">(</span><span class="s1">'[data-file-name="'</span> <span class="o">+</span> <span class="nx">args</span><span class="p">.</span><span class="nx">file</span><span class="p">.</span><span class="nx">name</span> <span class="o">+</span> <span class="s1">'"]'</span><span class="p">)</span> <span class="kr">as</span> <span class="nx">Element</span><span class="p">;</span>
        <span class="nx">EventHandler</span><span class="p">.</span><span class="nx">remove</span><span class="p">(</span><span class="nx">li</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="s1">'.close-icon-container'</span><span class="p">)</span> <span class="kr">as</span> <span class="nx">Element</span><span class="p">,</span> <span class="s1">'click'</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">removeFiles</span><span class="p">);</span>
        <span class="kd">let</span> <span class="nx">progressValue</span> : <span class="kt">number</span> <span class="o">=</span> <span class="nb">Math</span><span class="p">.</span><span class="nx">round</span><span class="p">((</span><span class="nx">args</span><span class="p">.</span><span class="nx">e</span><span class="p">.</span><span class="nx">loaded</span> <span class="o">/</span> <span class="nx">args</span><span class="p">.</span><span class="nx">e</span><span class="p">.</span><span class="nx">total</span><span class="p">)</span> <span class="o">*</span> <span class="mf">100</span><span class="p">);</span>
        <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nb">isNaN</span><span class="p">(</span><span class="nx">progressValue</span><span class="p">))</span> <span class="p">{</span>
            <span class="nx">li</span><span class="p">.</span><span class="nx">getElementsByTagName</span><span class="p">(</span><span class="s1">'progress'</span><span class="p">)[</span><span class="mf">0</span><span class="p">].</span><span class="nx">value</span> <span class="o">=</span> <span class="nx">progressValue</span><span class="p">;</span>   <span class="c1">// Updating the progress bar value</span>
        <span class="p">}</span>
    <span class="p">}</span>

    <span class="k">public</span> <span class="nx">onUploadSuccess</span>:  <span class="kt">EmitType</span><span class="o">&lt;</span><span class="nb">Object</span><span class="o">&gt;</span> <span class="o">=</span> <span class="p">(</span><span class="nx">args</span>: <span class="kt">any</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span>
        <span class="kd">let</span> <span class="nx">spinnerElement</span>: <span class="kt">HTMLElement</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">'dropArea'</span><span class="p">)</span> <span class="kr">as</span> <span class="nx">HTMLElement</span><span class="p">;</span>
        <span class="kd">let</span> <span class="nx">li</span>: <span class="kt">HTMLElement</span> <span class="o">=</span>  <span class="p">(</span><span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'dropArea'</span><span class="p">)</span> <span class="kr">as</span> <span class="nx">HTMLElement</span><span class="p">).</span><span class="nx">querySelector</span><span class="p">(</span><span class="s1">'[data-file-name="'</span> <span class="o">+</span> <span class="nx">args</span><span class="p">.</span><span class="nx">file</span><span class="p">.</span><span class="nx">name</span> <span class="o">+</span> <span class="s1">'"]'</span><span class="p">)</span> <span class="kr">as</span> <span class="nx">HTMLElement</span><span class="p">;</span>
        <span class="k">if</span> <span class="p">(</span><span class="nx">args</span><span class="p">.</span><span class="nx">operation</span> <span class="o">===</span> <span class="s1">'upload'</span><span class="p">)</span> <span class="p">{</span>
            <span class="kd">let</span> <span class="nx">progressBar</span>: <span class="kt">HTMLElement</span> <span class="o">=</span> <span class="nx">li</span><span class="p">.</span><span class="nx">getElementsByTagName</span><span class="p">(</span><span class="s1">'progress'</span><span class="p">)[</span><span class="mf">0</span><span class="p">];</span>
            <span class="p">(</span><span class="nx">li</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="s1">'.close-icon-container'</span><span class="p">)</span> <span class="kr">as</span> <span class="nx">Element</span><span class="p">).</span><span class="nx">classList</span><span class="p">.</span><span class="nx">add</span><span class="p">(</span><span class="s1">'delete-icon'</span><span class="p">);</span>
            <span class="nx">detach</span><span class="p">(</span><span class="nx">li</span><span class="p">.</span><span class="nx">getElementsByTagName</span><span class="p">(</span><span class="s1">'progress'</span><span class="p">)[</span><span class="mf">0</span><span class="p">]);</span>
            <span class="p">(</span><span class="nx">li</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="s1">'.file-size'</span><span class="p">)</span> <span class="kr">as</span> <span class="nx">HTMLElement</span><span class="p">).</span><span class="nx">style</span><span class="p">.</span><span class="nx">display</span> <span class="o">=</span> <span class="s1">'inline-block'</span><span class="p">;</span>
            <span class="p">(</span><span class="nx">li</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="s1">'.file-name'</span><span class="p">)</span> <span class="kr">as</span> <span class="nx">HTMLElement</span><span class="p">).</span><span class="nx">style</span><span class="p">.</span><span class="nx">color</span> <span class="o">=</span> <span class="s1">'green'</span><span class="p">;</span>
            <span class="p">(</span><span class="nx">li</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="s1">'.e-icons'</span><span class="p">)</span> <span class="kr">as</span> <span class="nx">HTMLElement</span><span class="p">).</span><span class="nx">onclick</span> <span class="o">=</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span>
                <span class="nx">createSpinner</span><span class="p">({</span> <span class="nx">target</span>: <span class="kt">spinnerElement</span><span class="p">,</span> <span class="nx">width</span><span class="o">:</span> <span class="s1">'25px'</span> <span class="p">});</span>
                <span class="nx">showSpinner</span><span class="p">(</span><span class="nx">spinnerElement</span><span class="p">);</span>
            <span class="p">};</span>
            <span class="p">(</span><span class="nx">li</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="s1">'.close-icon-container'</span><span class="p">)</span> <span class="kr">as</span> <span class="nx">HTMLElement</span><span class="p">).</span><span class="nx">onkeydown</span> <span class="o">=</span> <span class="p">(</span><span class="nx">e</span>: <span class="kt">any</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span>
                <span class="k">if</span> <span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">keyCode</span> <span class="o">===</span> <span class="mf">13</span><span class="p">)</span> <span class="p">{</span>
                    <span class="nx">createSpinner</span><span class="p">({</span> <span class="nx">target</span>: <span class="kt">spinnerElement</span><span class="p">,</span> <span class="nx">width</span><span class="o">:</span> <span class="s1">'25px'</span> <span class="p">});</span>
                    <span class="nx">showSpinner</span><span class="p">(</span><span class="nx">spinnerElement</span><span class="p">);</span>
                <span class="p">}</span>
            <span class="p">};</span>
        <span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
            <span class="k">this</span><span class="p">.</span><span class="nx">filesList</span><span class="p">.</span><span class="nx">splice</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">filesList</span><span class="p">.</span><span class="nx">indexOf</span><span class="p">(</span><span class="nx">li</span><span class="p">),</span> <span class="mf">1</span><span class="p">);</span>
            <span class="k">this</span><span class="p">.</span><span class="nx">filesDetails</span><span class="p">.</span><span class="nx">splice</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">filesList</span><span class="p">.</span><span class="nx">indexOf</span><span class="p">(</span><span class="nx">li</span><span class="p">),</span> <span class="mf">1</span><span class="p">);</span>
            <span class="nx">detach</span><span class="p">(</span><span class="nx">li</span><span class="p">);</span>
            <span class="nx">hideSpinner</span><span class="p">(</span><span class="nx">spinnerElement</span><span class="p">);</span>
            <span class="nx">detach</span><span class="p">(</span><span class="nx">spinnerElement</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="s1">'.e-spinner-pane'</span><span class="p">)</span> <span class="kr">as</span> <span class="nx">Element</span> <span class="p">);</span>
        <span class="p">}</span>
        <span class="nx">EventHandler</span><span class="p">.</span><span class="nx">add</span><span class="p">(</span><span class="nx">li</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="s1">'.close-icon-container'</span><span class="p">)</span> <span class="kr">as</span> <span class="nx">Element</span><span class="p">,</span> <span class="s1">'click'</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">removeFiles</span><span class="p">,</span> <span class="k">this</span><span class="p">);</span>
    <span class="p">}</span>

    <span class="k">public</span> <span class="nx">onFileRemove</span><span class="p">(</span><span class="nx">args</span>: <span class="kt">RemovingEventArgs</span><span class="p">)</span><span class="o">:</span> <span class="ow">void</span> <span class="p">{</span>
        <span class="nx">args</span><span class="p">.</span><span class="nx">postRawFile</span> <span class="o">=</span> <span class="kc">false</span><span class="p">;</span>
    <span class="p">}</span>

    <span class="k">public</span> <span class="nx">onUploadFailed</span><span class="p">(</span><span class="nx">args</span> : <span class="kt">any</span><span class="p">)</span> <span class="o">:</span> <span class="ow">void</span> <span class="p">{</span>
        <span class="kd">let</span> <span class="nx">li</span>: <span class="kt">Element</span> <span class="o">=</span> <span class="p">(</span><span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'dropArea'</span><span class="p">)</span> <span class="kr">as</span> <span class="nx">HTMLElement</span><span class="p">).</span><span class="nx">querySelector</span><span class="p">(</span><span class="s1">'[data-file-name="'</span> <span class="o">+</span> <span class="nx">args</span><span class="p">.</span><span class="nx">file</span><span class="p">.</span><span class="nx">name</span> <span class="o">+</span> <span class="s1">'"]'</span><span class="p">)</span> <span class="kr">as</span> <span class="nx">Element</span><span class="p">;</span>
        <span class="nx">EventHandler</span><span class="p">.</span><span class="nx">add</span><span class="p">(</span><span class="nx">li</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="s1">'.close-icon-container'</span><span class="p">)</span> <span class="kr">as</span> <span class="nx">Element</span><span class="p">,</span> <span class="s1">'click'</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">removeFiles</span><span class="p">,</span> <span class="k">this</span><span class="p">);</span>
        <span class="p">(</span><span class="nx">li</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="s1">'.file-name '</span><span class="p">)</span> <span class="kr">as</span> <span class="nx">Element</span><span class="p">).</span><span class="nx">classList</span><span class="p">.</span><span class="nx">add</span><span class="p">(</span><span class="s1">'upload-fails'</span><span class="p">);</span>
        <span class="k">if</span> <span class="p">(</span><span class="nx">args</span><span class="p">.</span><span class="nx">operation</span> <span class="o">===</span> <span class="s1">'upload'</span><span class="p">)</span> <span class="p">{</span>
            <span class="nx">detach</span><span class="p">(</span><span class="nx">li</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="s1">'.progress-bar-container'</span><span class="p">)</span> <span class="kr">as</span> <span class="nx">Element</span><span class="p">);</span>
        <span class="p">}</span>
    <span class="p">}</span>

    <span class="k">public</span> <span class="nx">removeFiles</span><span class="p">(</span><span class="nx">args</span> : <span class="kt">any</span><span class="p">)</span> <span class="o">:</span> <span class="ow">void</span> <span class="p">{</span>
        <span class="kd">let</span> <span class="nx">status</span> : <span class="kt">string</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">filesDetails</span><span class="p">[</span><span class="k">this</span><span class="p">.</span><span class="nx">filesList</span><span class="p">.</span><span class="nx">indexOf</span><span class="p">(</span><span class="nx">args</span><span class="p">.</span><span class="nx">currentTarget</span><span class="p">.</span><span class="nx">parentElement</span><span class="p">)].</span><span class="nx">status</span><span class="p">;</span>
        <span class="k">if</span> <span class="p">(</span><span class="nx">status</span> <span class="o">===</span> <span class="s1">'File uploaded successfully'</span><span class="p">)</span> <span class="p">{</span>
            <span class="k">this</span><span class="p">.</span><span class="nx">uploadObj</span><span class="o">?</span><span class="p">.</span><span class="nx">remove</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">filesDetails</span><span class="p">[</span><span class="k">this</span><span class="p">.</span><span class="nx">filesList</span><span class="p">.</span><span class="nx">indexOf</span><span class="p">(</span><span class="nx">args</span><span class="p">.</span><span class="nx">currentTarget</span><span class="p">.</span><span class="nx">parentElement</span><span class="p">)]);</span>
        <span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
            <span class="nx">detach</span><span class="p">(</span><span class="nx">args</span><span class="p">.</span><span class="nx">currentTarget</span><span class="p">.</span><span class="nx">parentElement</span><span class="p">);</span>
        <span class="p">}</span>
        <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">uploadObj</span> <span class="kr">as</span> <span class="nx">UploaderComponent</span><span class="p">).</span><span class="nx">element</span><span class="p">.</span><span class="nx">value</span> <span class="o">=</span> <span class="s1">''</span><span class="p">;</span>
    <span class="p">}</span>

    <span class="k">public</span> <span class="nx">generateSpinner</span><span class="p">(</span><span class="nx">targetElement</span>: <span class="kt">HTMLElement</span><span class="p">)</span><span class="o">:</span> <span class="ow">void</span> <span class="p">{</span>
        <span class="nx">createSpinner</span><span class="p">({</span> <span class="nx">target</span>: <span class="kt">targetElement</span><span class="p">,</span> <span class="nx">width</span><span class="o">:</span> <span class="s1">'25px'</span> <span class="p">});</span>
        <span class="nx">showSpinner</span><span class="p">(</span><span class="nx">targetElement</span><span class="p">);</span>
    <span class="p">}</span>
<span class="p">}</span></code></pre></div>
</div>


<div role="tabpanel" class="tab-pane" id="f8arq4x54i4af82n6ommrs2uacql6eug-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-6bq5atlv2ibs4b57shqz5zy53qdwvi49" onclick="LoadPreviewSample('https://ej2.syncfusion.com/angular/documentation/samples/uploader/cus_template-cs1',this.id);">Preview Sample</button><button class="stackblitz-button" id="StackBlitzButton-6bq5atlv2ibs4b57shqz5zy53qdwvi49" onclick="OpenSampleInStackBlitz('https://ej2.syncfusion.com/angular/documentation/samples/uploader/cus_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-6bq5atlv2ibs4b57shqz5zy53qdwvi49"></div>

<blockquote>
  <p>You can also explore <a href="https://www.syncfusion.com/angular-components/angular-file-upload">Angular File Upload</a> feature tour page for its groundbreaking features. You can also explore our <a href="https://ej2.syncfusion.com/angular/demos/#/material/uploader/default">Angular File Upload example</a> to understand how to customize the Angular File Upload with file-list and custom templates.</p>
</blockquote>

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

<ul>
  <li><a href="./how-to/customize-progressbar">Customize progress bar</a></li>
  <li><a href="./how-to/customize-button-with-html-element">Customize button with HTML element</a></li>
  <li><a href="./how-to/hide-default-drop-area">Customize drop area</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';
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