Filtering data in Angular Mention component
27 Sep 202311 minutes to read
The Mention component has built-in support to filter data items. The filter operation starts as soon as you start typing characters in the mention element.
Limit the minimum filter character
You can control the minimum length of user input to initiate the search action using minLength property. This can be useful if you have a very large list of data. The default value is 0, where suggestion the list opened as soon as the user inputs the mention character.
The remote request does not fetch the search data until the search key contains three characters as shown in the following example.
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' [minLength]='minLen' [target]='mentionTarget'></ejs-mention>`,
})
export class AppComponent {
constructor() {}
public searchData: DataManager = new DataManager({
url: 'https://services.odata.org/V4/Northwind/Northwind.svc/Customers',
adaptor: new ODataV4Adaptor,
crossDomain: true
});
public mentionTarget: string = '#mentionElement';
public query: Query = new Query().select(['ContactName', 'CustomerID']).take(7);
public fields: object = { text: 'ContactName', value: 'CustomerID' };
public minLen: number = 3
}
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);
Change the filter type
While filtering, you can change the filter type to Contains
, StartsWith
, or EndsWith
in the filterType property. The default filter operator is Contains
.
- StartsWith - Filter the items that begin with the specified text value.
- Contains - Filter the items that contain the specified text value.
- EndsWith - Filter the items that end with the specified text value.
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' [filterType]='filterType' [target]='mentionTarget'></ejs-mention>`,
})
export class AppComponent {
constructor() {}
public searchData: DataManager = new DataManager({
url: 'https://services.odata.org/V4/Northwind/Northwind.svc/Customers',
adaptor: new ODataV4Adaptor,
crossDomain: true
});
public mentionTarget: string = '#mentionElement';
public query: Query = new Query().select(['ContactName', 'CustomerID']).take(7);
public fields: Object = { text: 'ContactName', value: 'CustomerID' };
public filterType: string = 'EndsWith'
}
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);
Allow spacing between search
While filtering the data in the data source, you can allow the space in the middle of the mention by using the allowSpaces property. If the data source does not match with the mentioned element data, the popup will be hidden on the space key press. The default value of allowSpaces
is false
.
By default, the
allowSpaces
property is disabled, and the space ends the mention component search.
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' [fields]='fields' [allowSpaces]='allowSpaces' [target]='mentionTarget'></ejs-mention>`,
})
export class AppComponent {
constructor() {}
public userData: { [key: string]: Object }[] = [
{ Name : "Andrew Fuller", ID : "1" },
{ Name : "Anne Dodsworth" , ID : "2" },
{ Name : "Janet Leverling" , ID : "3" },
{ Name : "Laura Callahan" , ID : "4" },
{ Name : "Margaret Peacock" , ID : "5" }
];
public fields: Object = {text:'Name'};
public mentionTarget: string = '#mentionElement';
public allowSpaces : boolean = true;
}
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);
Customize the suggestion item count
While filtering, you can customize the number of list items to be displayed in the suggestion list by using the suggestionCount property.
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]='emailData' [fields]='fields' [suggestionCount]= 'suggestionCount' [target]='mentionTarget'></ejs-mention>`,
})
export class AppComponent {
constructor() {}
public emailData: { [key: string ] : Object }[] =[
{ Name: "Selma Rose", EmailId: "selma@gmail.com" },
{ Name: "Maria", EmailId: "maria@gmail.com" },
{ Name: "Russo Kay", EmailId: "russo@gmail.com" },
{ Name: "Robert", EmailId: "robert@gmail.com" },
{ Name: "Camden Kate",EmailId: "camden@gmail.com" },
{ Name: "Garth", EmailId: "garth@gmail.com" },
{ Name: "Andrew James", EmailId: "james@gmail.com" },
{ Name: "Olivia", EmailId: "olivia@gmail.com" },
{ Name: "Sophia", EmailId: "sophia@gmail.com" },
{ Name: "Margaret", EmailId: "margaret@gmail.com" },
{ Name: "Ursula Ann", EmailId: "ursula@gmail.com" },
{ Name: "Laura Grace", EmailId: "laura@gmail.com" },
{ Name: "Albert", EmailId: "albert@gmail.com" },
{ Name: "William", EmailId: "william@gmail.com" }
];
public mentionTarget: string = '#mentionElement';
public fields: Object = { text: 'Name' };
public suggestionCount: Number = 8
}
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);