Codementor Events

Angular 4/6 Filter Search Custom Pipe

Published Mar 24, 2019
Angular 4/6 Filter Search Custom Pipe

So one of my colleague was struggling with Angular search with the use of Custome pipe. So I helped and here below is a code that I have implemented for my friend. Come on follow along with me.

Directory Structure

app/
   _pipe/
        search/
          search.pipe.ts
          search.pipe.spec.ts
app/ 
   app.component.css
   app.component.html
   app.component.ts
   app.module.ts
   app.component.spec.ts

Run below command in terminal

ng g pipe search

This will generate search pipe.

app.component.html

<input type="text" class="form-control" placeholder="Search" [(ngModel)]="query" id="listSearch">
    <div class="panel panel-default col-xs-12 col-sm-11" *ngFor="let lock of locked | LockFilter: query">
    <input type="checkbox" (change)="openModal($event, lock)" class="check" id="{{lock.ID}}">
    <label [for]="lock.ID" class="check-label"></label>
    <h3 class="card-text name">{{lock.User}}</h3>
    <h3 class="card-text auth">{{lock.AuthID}}</h3>
    <h3 class="card-text form">{{lock.FormName}}</h3>
    <h3 class="card-text win">{{lock.WinHandle}}</h3>
</div>

My app.component file looks like this. Notice our LockedFilter. Which is our search pipe.

app.component.ts

Note: In this file, i have to use dummy records for implementation and testing purpose

import { Component, OnInit } from '@angular/core';
import { FormsModule }   from '@angular/forms';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
    export class AppComponent implements OnInit{
    public search:any = '';
    locked: any[] = [];

    constructor(){}

    ngOnInit(){
        this.locked = [
            {ID: 1, User: 'Agustin', AuthID: '68114', FormName: 'Fellman', WinHandle: 'Oak Way'},
            {ID: 2, User: 'Alden', AuthID: '98101', FormName: 'Raccoon Run', WinHandle: 'Newsome'},
            {ID: 3, User: 'Ramon', AuthID: '28586', FormName: 'Yorkshire Circle', WinHandle: 'Dennis'},
            {ID: 4, User: 'Elbert', AuthID: '91775', FormName: 'Lee', WinHandle: 'Middleville Road'},
        ]
    }
}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule }   from '@angular/forms';
import { AppComponent } from './app.component';
import { SearchPipe } from './_pipe/search/search.pipe';


@NgModule({
  declarations: [
    AppComponent,
    SearchPipe
  ],
  imports: [
    BrowserModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

search.pipe.ts

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
    name: 'LockFilter'
})

export class SearchPipe implements PipeTransform {
    transform(value: any, args?: any): any {

        if(!value)return null;
        if(!args)return value;

        args = args.toLowerCase();

        return value.filter(function(item){
            return JSON.stringify(item).toLowerCase().includes(args);
        });
    }
}

Hope this helps!

Discover and read more posts from chintan kotadiya
get started
post comments7Replies
Keshava Raj S
4 years ago

Thank you so much i changed a bit of your code for my problem but anyways i followed your idea … Thank you for the help again it really saved me

Ankit Kumar Mishra
4 years ago

@chintan kotadiya hlo sir i hv to search data by :-
select --location, arrival and departure dates, adults and children,
like filters that are on ecommerce websites. can u help me please

karan patel
5 years ago

what’s openModal($event, lock) in your component.html? and where is the function openModel defined or declared on change event in component.ts??

chintan kotadiya
4 years ago

This is simple function to open a model.

Show more replies