Customization in Angular Mention component

27 Sep 20238 minutes to read

Show or hide mention character

You can show mention character as prefix of selected item in mention component using showMentionChar property. The default value of ShowMentionChar is false.

app.component.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' [showMentionChar]='mentionShow'  [target]='mentionTarget' [fields]='fields' ></ejs-mention>`,
  

})
export class AppComponent {
  constructor() {}
  public userData: { [key: string]: Object }[] = [
    { Name : "Selma Rose", EmailId : "[e-mail]"},
    { Name : "Maria", EmailId : "[e-mail]" },
    { Name : "Russo kay", EmailId : "[e-mail]" },
    { Name : "Robert", EmailId : "[e-mail]" },
    { Name : "Garth", EmailId : "[e-mail]" }
  ];
  public fields: Object = {text:'Name'};
  public mentionTarget: string = '#mentionElement';
  public mentionShow: boolean = true;
}

app.module.ts

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 { }

main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

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

Adding the suffix character after selection

You can add suffix character while selecting an item in Mention component using suffixText property. You can add space or new line as suffix to the selected item. The default values is empty string.

app.component.ts

import { Component } from '@angular/core';

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


})
export class AppComponent {
  constructor() {}
  public userData: { [key: string]: Object }[] = [
    { Country : "Australia", Code : "AU" },
    { Country : "Bermuda" , Code : "BM" },
    { Country : "Canada" , Code :  "CA" },
    { Country : "Cameroon" , Code : "CM" },
    { Country : "Denmark" , Code : "DK" }
  ];
  public fields: Object = {text:'Country'};
  public mentionTarget: string = '#mentionElement';
  public mentionShow: boolean = true;
  public textSuffix: string = '&nbsp;'
}

app.module.ts

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 { }

main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

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

Configure the popup list

You can customize the suggestion list width and height using the popupHeight and popupWidth properties.

By default, the popup list width value is set as auto. Depending on the mentioned suggestion data list, the width value is automatically adjusted. The popup list height value is set as 300px.

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `<label id="comment" >Comments</label>
  <div id="mentionElement" placeholder = "Type @ and tag sport"></div>
  <ejs-mention [dataSource]='sportsData' [fields]='fields' [target]='mentionTarget' [popupHeight]='height' [popupWidth]='width' ></ejs-mention>`,


})
export class AppComponent {
  constructor() {}
  public sportsData: {[key: string]: Object}[] = [
    { ID : "game1" ,Game : "Badminton"},
    { ID : "game2" ,Game : "Football" },
    { ID : "game3" ,Game : "Tennis"},
    { ID : "game4" ,Game : "Hockey"},
    { ID : "game5" ,Game : "Basketball"},
    { ID : "game6" ,Game : "Cricket"}
  ];
  public fields: Object = {text:'Game'};
  public mentionTarget: string = '#mentionElement';
  public height: string = '100px';
  public width: string = '250px'
}

app.module.ts

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 { }

main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

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

Trigger character

You can customize the trigger character by using the mentionChar property in the Mention component. The trigger character triggers the suggestion list to display in the target area.

By default, the mentionChar is @.