custom filter search in angular 5

Question

 data : [
    {
       id :1,
       name : "client A",
       industry: "Industry 1",
       img:"https://abc"

    },
    {
       id :2,
       name : "client Ab",
       industry: "Industry 2",
       img:"https://abc"

    },
    {
       id :3,
       name : "client megha",
       industry: "Industry 5",
       img:"https://abc"

    },
    {
       id :4,
       name : "shubham",
       industry: "Industry 1",
       img:"https://abc"

    },
    {
       id :4,
       name : "rick",
       industry: "Industry 1",
       img:"https://abc"

    }
 ]

I want the filter to do the follwing:

When i start writing the word "c", i want the rick to disappear, right now the default behavior is, all are still shown (the c is in the middle of rick).

strict mode is something that i dont want to use, the behavior i want is:

if there is no value in the input, i want to see all, if i start to write i want to see the exact one by firstName. if i write "m" nothing should be displayed as none of the names start with m. i want the search on the basis of names and industry but not on the basis of img. please help.

Answer 1

As you are using Typescript and angular 5 , so you can use the ES6 method available with strings called startsWith which returns true only if the value is present at the starting index.

You can create a custom pipe in angular with startsWith method to filter out the data based on what you type in the textbox. For example if you r then it will only return rick . For this example I am following a case insensitive search. Check the code below

custom pipe startWith

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

@Pipe({name: 'startsWith'})
export class startsWithPipe implements PipeTransform {
  transform(value: any[], term: string): any[] {
    return value.filter((x:any) => x.name.toLowerCase().startsWith(term.toLowerCase()))

  } 
}

usage in the app.component with ngModel

app.component.ts

import { Component } from '@angular/core';
import {startsWithPipe} from './customstart.pipes';
import { FormsModule } from '@angular/forms';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular 5';
  query:string = '';
   data = [
    {
       id :1,
       name : "client A",
       industry: "Industry 1"

    },
    {
       id :2,
       name : "client Ab",
       industry: "Industry 2"

    },
    {
       id :3,
       name : "client megha",
       industry: "Industry 5"

    },
    {
       id :4,
       name : "shubham",
       industry: "Industry 1"

    },
    {
       id :4,
       name : "rick",
       industry: "Industry 1"

    }
 ]
}

app.component.html

<input type="text" [(ngModel)]="query">
<ul>
<li *ngFor="let item of data | startsWith : query">{{item.name}}</li>
</ul>

Here is a working demo : https://stackblitz.com/edit/angular-custom-pipes-mkah47

Edit : To show the results if either the starting character of the firstname or industry matches the typed character then you need to change your pipe like below

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


    @Pipe({name: 'startsWith'})
    export class startsWithPipe implements PipeTransform {
      transform(value: any[], term: string): any[] {
        return value.filter((x:any) => x.name.toLowerCase().startsWith(term.toLowerCase()) || x.industry.toLowerCase().startsWith(term.toLowerCase()))

      } 
    }

Here is the sample data to test

data = [
    {
       id :1,
       name : "client A",
       industry: "Tech"

    },
    {
       id :2,
       name : "client Ab",
       industry: "Tourism"

    },
    {
       id :3,
       name : "client megha",
       industry: "Hotel"

    },
    {
       id :4,
       name : "shubham",
       industry: "Retail"

    },
    {
       id :4,
       name : "rick",
       industry: "IT"

    }
 ]

I have updated the example here : https://stackblitz.com/edit/angular-custom-pipes-mkah47