In this article I will be explaining about how to implement a simple and advanced search using pipe concept. I have explained in my previous article about how to do a simple search or filtering using angular js 1 as well. If you want to compare both implementation you can refer this link.
1. Simple search using pipe in Angular
2. Example of search using different array structure
3. Advanced search using pipe in Angular
4. Search entire Array
1. Simple search using pipe in Angular
OK, let’s start with our Angular 2 simple search implementation using pipe.
I will share the app module code as well to avoid any confusion
App module code
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import {FilterPipe} from './pipes'
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent,FilterPipe
],
imports: [
BrowserModule,
FormsModule,
HttpModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
FilterPipe is nothing but our pipe name and './pipe' is the typscript file path which has pipe code.
Let us check our component code
App component
import { Component } from '@angular/core';
import {FilterPipe} from './pipes'
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title:String;
names:any;
constructor(){
this.title = "Angular 2 simple search";
this.names = ['Prashobh','Abraham','Anil','Sam','Natasha','Marry','Zian','karan']
}
}
Here you can see a simple array which contains some names. The template url is nothing but our html.
Template [ templateUrl: './app.component.html']
<div>
<h3> {{title}}</h3>
<input type="text" [(ngModel)]="queryString" id="search" placeholder="Search to type">
<ul>
<li *ngFor="let n of names | FilterPipe: queryString">
{{n}}
</li>
</ul>
</div>
Now create a pipe and name as FilterPipe. Check below code for pipe.
Pipe
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'FilterPipe',
})
export class FilterPipe implements PipeTransform {
transform(value: any, input: string) {
if (input) {
input = input.toLowerCase();
return value.filter(function (el: any) {
return el.toLowerCase().indexOf(input) > -1;
})
}
return value;
}
}
We are done. Run the application and start typing on text box you can see filtered result.
You can go to our GitHub page and download all the code as well. Download code from GitHub page.
2. Example of search using different array structure
Now let us check with another example, above example is searching through a simple list. We will modify our array and see how it will work.
Modified Array
this.list = [
{name:'prashobh',age:'25'},
{name:'Abraham',age:'35'},
{name:'Sam',age:'45'},
{name:'Anil',age:'15'},
{name:'Mariya',age:'24'},
{name:'Crock',age:'28'},
{name:'Ram',age:'21'},
]
Modified pipe
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'FilterPipe',
})
export class FilterPipe implements PipeTransform {
transform(value: any, input: string) {
if (input) {
input = input.toLowerCase();
return value.filter(function (el: any) {
return el.name.toLowerCase().indexOf(input) > -1;
})
}
return value;
}
}
I just updated to "el.name", it will search through the array and find the respective names. Ok now let us check with another example which can search through both age and name.
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'FilterPipe',
})
export class FilterPipe implements PipeTransform {
transform(value: any, input: string) {
if (input) {
input = input.toLowerCase();
return value.filter(function (el: any) {
return el.name.toLowerCase().indexOf(input) > -1 ||
el.age.toLowerCase().indexOf(input) > -1;
})
}
return value;
}
}
You can easily update this pipe for your needs.
3. Advanced search using pipe in Angular
We have already seen how the simple search works in angular, now let us check little more advanced search. You can provide a list of parameters to pipe which you want to search. Let us check with one example.
Component code
export class AppComponent {
title:String;
names:any;
constructor(){
this.title = "Angular advanced search";
this.list = [
{name:'prashobh',age:'25'},
{name:'Abraham',age:'35'},
{name:'Sam',age:'45'},
{name:'Anil',age:'15'},
{name:'Mariya',age:'24'},
{name:'Crock',age:'28'},
{name:'Ram',age:'21'},
]
this.searchableList = ['name','age']
}
}
There is no change except I have added a list "searchableList". This list we will be passing to our custom pipe, check below updated html for that.
<input type="text" [(ngModel)]="queryString" id="search" placeholder="Search to type">
<ul>
<li *ngFor="let n of list | FilterPipe: queryString : searchableList ">
{{n.name}} ({{n.age}})
</li>
</ul>
We can pass array/object/string to a customer pipe, I am not explaining those in details here. Now let us check our updated pipe.
Updated pipe
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'FilterPipe',
})
export class FilterPipe implements PipeTransform {
transform(value: any, input: string, searchableList: any) {
if (input) {
input = input.toLowerCase();
return value.filter(function (el: any) {
var isTrue = false;
for (var k in searchableList) {
if (el[searchableList[k]].toLowerCase().indexOf(input) > -1) {
isTrue = true;
}
if (isTrue) {
return el
}
}
})
}
return value;
}
}
We are done, you can simply add any parameters which you want to be searchable. You can use above plunker for your testing.
4. Search entire Array
If you want your pipe to be searched for entire array, you can use below pipe.
@Pipe({
name: 'FilterPipe'
})
export class FilterPipe implements PipeTransform {
transform(value: any, args?: any): any {
if (!value) return null;
if (!args) return value;
args = args.toLowerCase();
return value.filter(function (item: any) {
return JSON.stringify(item).toLowerCase().includes(args);
});
}
}
In this article we have discussed about doing a simple and advanced search in angular 2+ using pipe concept with different examples.
Related Info
1. Share data between components using a service file.
2. Create reusable component and share data between them.
