Template in Angular Mention component

27 Sep 202310 minutes to read

The Mention has been provided with several options to customize each list item, display item and waiting popup. It uses the Essential JS 2 Template engine to compile and render the elements properly.

Item template

The content of each list item within the Mention can be customized with the help of itemTemplate property.

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

app.component.ts
app.module.ts
main.ts
import { Component } from '@angular/core';
import { Query, DataManager, ODataV4Adaptor } from '@syncfusion/ej2-data';

@Component({
  selector: 'app-root',
  template: `<label id="comment" >Comments</label>
  <div id="mentionElement" placeholder = "Type @ and tag user"></div>
  <ejs-mention [dataSource]='dataSource' [query]='query' [fields]='fields' [target]='mentionTarget' [sortOrder]='sortOrder' popupWidth='250px'>
    <ng-template #itemTemplate let-data>
      <span><span class='name'></span><span class ='city'></span></span>
    </ng-template></ejs-mention>`,

})
export class AppComponent {
  constructor() {}
  public dataSource: DataManager = new DataManager({
    url: 'https://services.odata.org/V4/Northwind/Northwind.svc/',
    adaptor: new ODataV4Adaptor,
    crossDomain: true
});
  public mentionTarget: string = '#mentionElement';
  public query: Query = new Query().from('Employees').select(['FirstName', 'City','EmployeeID']).take(6);
  public fields: object = { text: 'FirstName', value: 'EmployeeID' };
  public sortOrder: string = 'Ascending';
  public itemTemplate: any = "<span><span class='name'>${FirstName}</span><span class ='city'>${City}</span></span>"
  }
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { MentionModule } from '@syncfusion/ej2-angular-dropdowns';
/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,FormsModule, ReactiveFormsModule, MentionModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

import 'zone.js';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

Display template

The currently selected value that is to be displayed on the mention element can be customized using the displayTemplate property.

In the following sample, the selected value is displayed as a combined text of both FirstName and City in the mention element, which is separated by a hyphen.

app.component.ts
app.module.ts
main.ts
import { Component } from '@angular/core';
import { Query, DataManager, ODataV4Adaptor } from '@syncfusion/ej2-data';

@Component({
  selector: 'app-root',
  template: `<label id="comment" >Comments</label>
  <div id="mentionElement" placeholder = "Type @ and tag user"></div>
  <ejs-mention [dataSource]='dataSource' [query]='query' [fields]='fields' [target]='mentionTarget' [sortOrder]='sortOrder' popupWidth='250px'>
      <ng-template #itemTemplate let-data>
          <span><span></span><span class ='city'></span></span>
      </ng-template>
      <ng-template #displayTemplate let-data>
          <span> - </span>
      </ng-template>
  </ejs-mention>`,

})
export class AppComponent {
  constructor() {}
  public dataSource: DataManager = new DataManager({
    url: 'https://services.odata.org/V4/Northwind/Northwind.svc/',
    adaptor: new ODataV4Adaptor,
    crossDomain: true
});
  public mentionTarget: string = '#mentionElement';
  public query: Query = new Query().from('Employees').select(['FirstName', 'City','EmployeeID']).take(6);
  public fields: object =  { text: 'FirstName', value: 'EmployeeID' };
  public sortOrder: string = 'Ascending';
  public itemTemplate: any = "<span><span>${FirstName}</span><span class ='city'>${City}</span></span>";
  public displayTemplate: any = "<span>${FirstName} - ${City}</span>"
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { MentionModule } from '@syncfusion/ej2-angular-dropdowns';
/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,FormsModule, ReactiveFormsModule, MentionModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

import 'zone.js';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

No records template

The Mention is provided with support to custom design the popup list content when no data is found and no matches found on search with the help of noRecordsTemplate property.

In the following sample, popup list content displays the notification of no data available.

app.component.ts
app.module.ts
main.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `<label id="comment" >Comments</label>
  <div id="mentionElement" placeholder = "Type @ and tag user"></div>
  <ejs-mention [dataSource]='userData' [target]='mentionTarget' [noRecordsTemplate]='noRecordsTemplate' ></ejs-mention>`,

})
export class AppComponent {
  constructor() {
  }
  public userData: string[] = [];
  public mentionTarget: string = "#mentionElement";
  public noRecordsTemplate: any = "<span class='norecord'> NO DATA AVAILABLE</span>"
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { MentionModule } from '@syncfusion/ej2-angular-dropdowns';
/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,FormsModule, ReactiveFormsModule, MentionModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

import 'zone.js';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

Spinner template

The Mention provides support to customize the waiting spinner when data fetching takes time to load respective data in the popup using the spinnerTemplate property.

In the following sample, customized spinner is shown while fetching the data from the service.

app.component.ts
app.module.ts
main.ts
import { Component } from '@angular/core';
import { Query, DataManager, ODataV4Adaptor } from '@syncfusion/ej2-data';

@Component({
  selector: 'app-root',
  template: `<label id="comment" >Comments</label>
  <div id="mentionElement" placeholder = "Type @ and tag user"></div>
  <ejs-mention [dataSource]='searchData' [query]='query' [fields]='fields' [target]='mentionTarget' popupWidth='250px'>
    <ng-template #spinnerTemplate>
        <div class="spinner_loader"></div>
    </ng-template>
    </ejs-mention>`,

})
export class AppComponent {
  constructor() {}
  public searchData: DataManager = new DataManager({
    url: 'https://services.odata.org/V4/Northwind/Northwind.svc/',
    adaptor: new ODataV4Adaptor,
    crossDomain: true
});
  public mentionTarget: string = '#mentionElement';
  public query: Query = new Query().from('Employees').select(['FirstName', 'City','EmployeeID']).take(26);
  public fields: object =  { text: 'FirstName', value: 'EmployeeID' };
  public sortOrder: string = 'Ascending';
  public spinnerTemplate:any = '<div class="spinner_loader"></div>'
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { MentionModule } from '@syncfusion/ej2-angular-dropdowns';
/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,FormsModule, ReactiveFormsModule, MentionModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

import 'zone.js';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);