Tuesday, March 28, 2017

Simple and advanced search using pipe in Angular

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

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.

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


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.


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.

Advanced search using pipe in Angular


We have already seen how the simple search works in angular 2, 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. 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.

3. Angular client side pagination.

4. Angular show more/less pagination

3 comments :