Mention

Mention - Bootstrap 5 & Material Design components

Responsive Mention plugin built with the latest Bootstrap 5. Mention is an autocomplete dropdown menu for your search inputs. It is useful for tagging items or topics.

Note: Read the API tab to find all available options and advanced customization

Basic example

Type @ and use up/down arrows, home/end keys to navigate. Click enter or use mouse click to choose item 

<mdb-form-control>
  <input
    mdbInput
    mdbMention
    queryBy="username"
    placement="bottom"
    trigger='@'
    type="text"
    id="form1"
    class="form-control"
    [items]="items"
  />
  <label mdbLabel class="form-label" for="form1">Example label</label>
</mdb-form-control>
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent {
  items = [
    { name: 'James', username: 'james123', image: '' },
    { name: 'John', username: 'john322', image: '' },
    { name: 'Mary', username: 'maryx', image: '' },
    { name: 'Diane', username: 'didiane92', image: '' },
    { name: 'Max', username: 'maximus', image: '' },
    { name: 'Andrew', username: 'andrew00', image: '' },
    { name: 'Rebecca', username: 'becky', image: '' },
    { name: 'Thomas', username: 'tommy16', image: '' },
    { name: 'Alexander', username: 'xander', image: '' },
    { name: 'Jessica', username: 'jessyJ12', image: '' },
  ];
};

Toggle show list on trigger

Showing all items on trigger key is turned on by default. Set showListOnTrigger option to false to turn it off and show items only after user search input 

<mdb-form-control>
  <input
    mdbInput
    mdbMention
    queryBy="username"
    placement="bottom"
    showListOnTrigger="false"
    trigger="@"
    type="text"
    id="form1"
    class="form-control"
    [items]="items"
  />
  <label mdbLabel class="form-label" for="form1">Example label</label>
</mdb-form-control>
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent {
  items = [
    { name: 'James', username: 'james123', image: '' },
    { name: 'John', username: 'john322', image: '' },
    { name: 'Mary', username: 'maryx', image: '' },
  ];
};

Placement example

Use placement options to change placement of the component

Position of the component will be flipped to opposite side when no free space is available. Once enough space is detected, component will flip back to its original placement 

<mdb-form-control>
  <input
    mdbInput
    mdbMention
    queryBy="username"
    placement="top"
    trigger='@'
    type="text"
    id="form10"
    class="form-control"
    [items]="items"
  />
  <label mdbLabel class="form-label" for="form10">Top placement example</label>
</mdb-form-control>

<mdb-form-control>
  <input
    mdbInput
    mdbMention
    queryBy="username"
    placement="right"
    trigger='@'
    type="text"
    id="form11"
    class="form-control"
    [items]="items"
  />
  <label mdbLabel class="form-label" for="form11">Right placement example</label>
</mdb-form-control>
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent {
  items = [
    { name: 'James', username: 'james123', image: '' },
    { name: 'John', username: 'john322', image: '' },
    { name: 'Mary', username: 'maryx', image: '' },
    { name: 'Diane', username: 'didiane92', image: '' },
    { name: 'Max', username: 'maximus', image: '' },
    { name: 'Andrew', username: 'andrew00', image: '' },
    { name: 'Rebecca', username: 'becky', image: '' },
    { name: 'Thomas', username: 'tommy16', image: '' },
    { name: 'Alexander', username: 'xander', image: '' },
    { name: 'Jessica', username: 'jessyJ12', image: '' },
  ];
};

Textarea example

Mention works also with textarea

<mdb-form-control>
  <textarea
    mdbInput
    mdbMention
    queryBy="username"
    placement="bottom"
    trigger='@'
    type="text"
    id="form8"
    class="form-control"
    [items]="items"
  ></textarea>
  <label mdbLabel class="form-label" for="form8">Textarea example</label>
</mdb-form-control>
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent {
  items = [
    { name: 'James', username: 'james123', image: '' },
    { name: 'John', username: 'john322', image: '' },
    { name: 'Mary', username: 'maryx', image: '' },
  ];
};

Customize no results text

Set noResultsText to a text of your choice to change the message for no results found 

<mdb-form-control>
  <input
    mdbInput
    mdbMention
    queryBy="name"
    noResultsText="No results found"
    placement="bottom"
    trigger='@'
    type="text"
    id="form11"
    class="form-control"
    [items]="items"
  />
  <label mdbLabel class="form-label" for="form11">Search by name</label>
</mdb-form-control>
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent {
  items = [
    { name: 'James', username: 'james123', image: '' },
    { name: 'John', username: 'john322', image: '' },
    { name: 'Mary', username: 'maryx', image: '' },
  ];
};

Trigger sign

Use trigger option to change search triggering sign

<mdb-form-control>
  <input
    mdbInput
    mdbMention
    queryBy="name"
    noResultsText="No results found"
    placement="bottom"
    trigger="#"
    type="text"
    id="form11"
    class="form-control"
    [items]="items"
  />
  <label mdbLabel class="form-label" for="form11">Search by name</label>
</mdb-form-control>
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent {
  items = [
    { name: 'James', username: 'james123', image: '' },
    { name: 'John', username: 'john322', image: '' },
    { name: 'Mary', username: 'maryx', image: '' },
  ];
};

Show image

Use showImg option to show images in the mentions list

<mdb-form-control>
  <input
    mdbInput
    mdbMention
    queryBy="username"
    placement="bottom"
    showImg="true"
    trigger='@'
    type="text"
    id="form1"
    class="form-control"
    [items]="items"
  />
  <label mdbLabel class="form-label" for="form1">Example label</label>
</mdb-form-control>
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent {
  items = [
    {
      name: 'James',
      username: 'james123',
      image: 'https://mdbootstrap.com/img/Photos/Others/images/43.webp',
    },
    {
      name: 'John',
      username: 'john322',
      image: 'https://mdbootstrap.com/img/Photos/Others/images/43.webp',
    },
    {
      name: 'Mary',
      username: 'maryx',
      image: 'https://mdbootstrap.com/img/Photos/Others/images/43.webp',
    },
  ];
};

Visible items

Use visibleItems option to change the number of options that will be displayed in the select dropdown without scrolling. 

<mdb-form-control>
  <input
    mdbInput
    mdbMention
    visibleItems="3"
    queryBy="username"
    placement="bottom"
    trigger='@'
    type="text"
    id="form1"
    class="form-control"
    [items]="items"
  />
  <label mdbLabel class="form-label" for="form1">Visible items</label>
</mdb-form-control>
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent {
  items = [
    { name: 'James', username: 'james123', image: '' },
    { name: 'John', username: 'john322', image: '' },
    { name: 'Mary', username: 'maryx', image: '' },
    { name: 'Diane', username: 'didiane92', image: '' },
    { name: 'Max', username: 'maximus', image: '' },
    { name: 'Andrew', username: 'andrew00', image: '' },
    { name: 'Rebecca', username: 'becky', image: '' },
    { name: 'Thomas', username: 'tommy16', image: '' },
    { name: 'Alexander', username: 'xander', image: '' },
    { name: 'Jessica', username: 'jessyJ12', image: '' },
  ]
};

Multiple lists

Assign multiple mentions to the element by giving each mention different trigger key

<mdb-form-control>
  <input
    mdbInput
    mdbMention
    placement="bottom"
    [trigger]="['@', '#', '$', '%']"
    [queryBy]="multipleExampleQueryBy"
    (mentionChange)="onMentionChange($event)"
    type="text"
    id="form4"
    class="form-control"
    [items]="multipleExampleItems"
  />
  <label mdbLabel class="form-label" for="form4">Triggers: @, #, $, %</label>
</mdb-form-control>
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {

  activeTriggerMultipleExample = '';

  onTriggerChange(mentionChange) {
    const triggerChanged = this.activeTriggerMultipleExample !== mentionChange.trigger;
    if (!triggerChanged) {
      return;
    }
    this.activeTriggerMultipleExample = mentionChange.trigger;

    switch (this.activeTriggerMultipleExample) {
      case '@':
        this.multipleExampleItems = [
          { name: 'James', username: 'james123', image: '' },
          { name: 'John', username: 'john322', image: '' },
          { name: 'Mary', username: 'maryx', image: '' },
          { name: 'Diane', username: 'didiane92', image: '' },
        ];
        this.multipleExampleQueryBy = 'name';
        break;
      case '#':
        this.multipleExampleItems = [
          { productName: 'fish' },
          { productName: 'meat' },
          { productName: 'vegetables' },
        ];
        this.multipleExampleQueryBy = 'productName';
        break;
      case '$':
        this.multipleExampleItems = [{ id: '1234' }, { id: '4955' }, { id: '3455' }];
        this.multipleExampleQueryBy = 'id';
        break;
      case '%':
        this.multipleExampleItems = [{ city: 'Warsaw' }, { city: 'Berlin' }, { city: 'Amsterdam' }];
        this.multipleExampleQueryBy = 'city';
        break;
    }
  }
}

Async

Use disableFilter option to disable filtering by directive and use asynchronous data loading 

<mdb-form-control>
  <input
    mdbInput
    mdbMention
    (mentionChange)="onMentionValueChangedAsyncExample($event)"
    (mentionClose)="onMentionCloseAsyncExample()"
    placement="top"
    type="text"
    [items]="asyncExampleItems"
    [disableFilter]="true"
    [showNoResultText]="asyncShowNoResults"
    queryBy="username"
    id="form3"
    class="form-control"
  />
  <label mdbLabel class="form-label" for="form3">Async data success</label>
</mdb-form-control>
<div class="mx-2"></div>
<mdb-form-control>
  <input
    mdbInput
    mdbMention
    (mentionChange)="onMentionValueChangedError()"
    [noResultText]="noResultAsync"
    [showNoResultText]="false"
    placement="top"
    type="text"
    [items]="asyncErrorExampleItems"
    [disableFilter]="true"
    [asyncError]="asyncError"
    queryBy="username"
    id="form3"
    class="form-control"
    />
  <label mdbLabel class="form-label" for="form3">Async data error</label>
</mdb-form-control>
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {

  noResultAsync = 'No result found';
  asyncExampleItems: any[] = [];
  asyncShowNoResults = false;
  asyncErrorExampleItems: any[] = [];
  asyncError: boolean = false;

  onMentionValueChangedAsyncExample(value) {
    const url = `https://jsonplaceholder.typicode.com/users`;
    this._http
      .get(url)
      .pipe(catchError(() => of(`val`)))
      .subscribe((data) => {
        this.asyncExampleItems = Object.values(data).filter((user) =>
          user['username'].toLowerCase().includes(value.searchTerm.toLowerCase())
        );
        this.asyncShowNoResults = true;
      });
    }

    onMentionCloseAsyncExample() {
      this.asyncShowNoResults = false;
    }

    onMentionValueChangedError() {
      const url = `https://invalid-link.com`;
      this._http
        .get(url)
        .pipe(
          catchError(() => {
            this.asyncError = true;
            this.noResultAsync = 'There was problem reaching your data from the server';
            return of(`val`);
          })
        )
        .subscribe((data) => {});
    }
}

Mention - API

Installation

To install and configure the plugin follow our Plugins Installation Guide. Please remember to update all the plugin names and import paths. You can find all the necessary information in the Import section. 

npm i git+https://oauth2:ACCESS_TOKEN@git.mdbootstrap.com/mdb/angular/mdb5/plugins/prd/mention

Import

import { MdbMentionModule } from 'mdb-angular-mention';
…
@NgModule ({
  ...
  imports: [MdbMentionModule],
  ...
})
@import 'mdb-angular-mention/scss/mention.scss';

Inputs

Name Type Default Description
items Array '[]' An array of items to display on the list. Each user should contain the required username key value. Other key values are optional e.g. user, image
noResultText String 'No results found' The text that will be displayed when no item is found after using mention filter
trigger String '@' Changes trigger sign that allows to search for items
queryBy String 'name' Changes the key by which list will be rendered and filtered
placement String 'bottom' Changes placement of the component relative to the reference element
showListOnTrigger Boolean 'true' Specifies whether whole list has to be opened before search input
showImg Boolean 'true' Displays user image on the list
asyncError Boolean 'false' Allows to manually show an error in a dropdown list
showNoResultText Boolean 'true' Specifies whether the built-in 'no results' error should be displayed if there is no results
outputKey String '' Changes the key by which chosen item will be insterted into the input/textarea
disableFilter Boolean 'false' Disables filtering to enable client side and dynamic filtering of items
visibleItems Number 5 The maximum number of items which are visible in the mention dropdown without scrolling.

Outputs

Name Type Description
mentionOpen EventEmitter<void> This output fires immediately when the mention is opened.
mentionClose EventEmitter<void> This output fires immediately when the mention is closed.
mentionSelect EventEmitter<any> This output fires immediately when the list item is selected
mentionChange EventEmitter<MdbMentionChange> This output fires immediately when the mention reference element value changes 
<mdb-form-control>
  <input
    mdbInput
    mdbMention
    queryBy="username"
    placement="bottom"
    trigger="@"
    type="text"
    id="form1"
    class="form-control"
    [items]="items"
    (mentionOpen)="onMentionOpen()"
    (mentionChange)="onMentionChange($event)"
  />
  <label mdbLabel class="form-label" for="form1">Example label</label>
</mdb-form-control>
import { Component } from '@angular/core';
import { MdbMentionChange } from 'mdb-angular-mention';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent {
  items = [
    { name: 'James', username: 'james123', image: '' },
    { name: 'John', username: 'john322', image: '' },
    { name: 'Mary', username: 'maryx', image: '' },
  ];
  onMentionOpen() {
    console.log('mention open: ');
  }
  onMentionChange(event: MdbMentionChange) {
    console.log('mention changed: ', event);
  }
}

Methods

Name Description Example
open Manually opens a mention mention.open()
close Manually close a mention mention.close() 
<mdb-form-control>
  <input
    mdbInput
    mdbMention
    queryBy="username"
    placement="bottom"
    trigger="@"
    type="text"
    id="form1"
    class="form-control"
    [items]="items"
  />
  <label mdbLabel class="form-label" for="form1">Example label</label>
</mdb-form-control>
import { AfterViewInit, Component, ViewChild } from '@angular/core';
import { MdbMentionDirective } from 'mdb-angular-mention';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent implements AfterViewInit {
  @ViewChild(MdbMentionDirective) mention!: MdbMentionDirective;

  items = [
    { name: 'James', username: 'james123', image: '' },
    { name: 'John', username: 'john322', image: '' },
    { name: 'Mary', username: 'maryx', image: '' },
  ];

  ngAfterViewInit(): void {
    this.mention.open();
  }
}