angular2 case insensitive filter using pipe?

Question

I want to know how can you perform case-insensitive comparison for searching using pipes in angular2.

below is the approach I have used so far.

Its searching the components correctly but is case-sensitive.

How can I make it case-insensitive?

1.components.json

"components": [
  {
      "name":"HeadingComponent",
      "desc":"",
      "cmpType":"Standard",
      "imgUrl":"http://localhost:3202/uploads/ABC_bank.png",
      "cmpLocation":"",
      "isDynamic":"true"          
  },
  {
      "name":"BodyComponent",
      "desc":"",
      "cmpType":"Standard",
      "imgUrl":"http://localhost:3202/uploads/demoairline.png",
      "cmpLocation":"",
      "isDynamic":"true" 
  },
  {
      "name":"FooterComponent",
      "desc":"",
      "cmpType":"Standard",
      "imgUrl":"http://localhost:3202/uploads/SCE_5.PNG",
      "cmpLocation":"",
      "isDynamic":"true" 
  }

after reading this JSON data I am performing a search operation using pipe using below code.

2.components.html

<input class="form-control input-sm" [(ngModel)]="searchComp" type="text" placeholder="Search Components..." />
<li *ngFor="#comp of record.components | search:searchComp " style="display:block;padding:0px;cursor:move;position:relative;margin-top:5px;margin-bottom:5px"
        title="{{comp.name}}">
    <p class="text-center h6" style="font-size:8px;color:blue;font-weight:bold;">
       {{comp.name }}
    </p>
    <img class="img-thumbnail1" src="{{comp.imgUrl}}" style="max-width:100%;" (click)="clicked(comp.name)">
</li>

3.search.pipe.ts

import {Pipe, PipeTransform,Injectable} from 'angular2/core';

@Pipe({
    name: 'search',
    pure: false 
})
@Injectable()
export class SearchPipe implements PipeTransform {
    transform(components: any[], args: any): any {
        // filter components array, components which match and return true will be kept, false will be filtered out
        return components.filter((component)=>component.name.indexOf(args)!== -1);
        //return components;
    }

}

So far its working correctly but it is case-sensitive ,How can I make this case-insensitive? I tried angularjs 1 logic as

*ngFor="#comp of record.components | search:searchComp :false"

but it didnt work. any suggestions? thanks in advance.

You could change `component.name.indexOf(args)!== -1` to `component.name.toLowerCase().indexOf(args? args.toLowerCase(): '')!== -1` — Pankaj Parkar, Apr 21 '16 at 12:35
http://stackoverflow.com/questions/2140627/javascript-case-insensitive-string-comparison — Günter Zöchbauer, Apr 21 '16 at 12:36

Thierry Templier · Accepted Answer · 2016-04-21T12:50:09.230

1

You could try something like that:

@Pipe({
  name: 'search',
  pure: false 
})
@Injectable()
export class SearchPipe implements PipeTransform {
  transform(components: any[], args: any): any {
    var val = args[0];
    var lowerEnabled = args.length>1 ? args[1] : false;

    // filter components array, components which match and return true will be kept, false will be filtered out
    return components.filter((component)=> {
      if (lowerEnabled) {
        return (component.name.toLowerCase().indexOf(val.toLowerCase())!== -1);
      } else {
        return (component.name.indexOf(val)!== -1);
      }
    });
    //return components;
  }
}

and use it this way:

*ngFor="#comp of record.components | search:searchComp:true"

See this plunkr: https://plnkr.co/edit/cFNvstvWBWSG4l0UaPb2?p=preview.

edited Apr 21 '16 at 12:50

answered Apr 21 '16 at 12:36

Thierry Templier

198,364
44
396
360

its still not working. tolowercase is not a function exception :( – Bhushan Gadekar Apr 21 '16 at 12:42
1

It's `toLowerCase` not `tolowercase`. If that is the exception. – Ankit Singh Apr 21 '16 at 12:58
I have inserted your code as it is in my code.Exception is 'TypeError: Cannot read property 'toLowerCase' of undefined in [record.components | search:searchComp:true in ComponentBarComponent@18:16]' – Bhushan Gadekar Apr 21 '16 at 14:05
Either elements in the `components` list don't have a `name` property either the searchComp is null... Could you check this with a breakpoint or console.log? Thanks! – Thierry Templier Apr 21 '16 at 14:09

angular2 case insensitive filter using pipe?

1 Answers1