Using a Pipe in Angular to Filter multiple properties

Question

I've used a tutorial to filter a search using a single property (name) from a table of results and what works the way I want it to brilliantly, but how can I adapt the pipe to search across multiple properties (i.e. SpeciesName, EnclosureName etc.) ?

Pipe:

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

@Pipe({
  name: 'filter'
})
export class FilterPipe implements PipeTransform {

  transform(items: any[], searchText: string): any {
    if(!items) return [];
    if(!searchText) return items;
    searchText = searchText.toLowerCase();
    return items.filter( it => {
      return it.Name.toLowerCase().includes(searchText);
    });
  }

}

HTML:

<section>
    <div class="toolbar">
        <input id="fur-filter" [(ngModel)]="searchText" class="filter" placeholder="FILTER ANIMALS, SPECIES, ENCLOSURES, TEMPERAMENTS ETC." />
        <button id="AddNewAnimal" class="ko-btn">Add New Animal</button>
        <button id="InspectionReport" class="ko-btn">Start Inspection Report</button>
    </div> 
    <div class="list-container">
      <div class="animal-row" *ngFor="let furries of animalsFur | filter : searchText">
        <img [src]="furries.avatar" />
        <div class="animal-info">
          <p>{{furries.Name}} {{furries.Nickname}}</p>
          <div class="row">
            <div id="species" class="col">
              <p id="species-text">Species: <span>{{furries.SpeciesName}}</span></p>
            </div>
            <div class="col">
              <p>Sub-Species: <span>{{furries.SubSpeciesName}}</span></p>
            </div>
            <div class="col">
              <p>Arrived: <span>{{furries.Welcomed}}</span></p>
            </div>
            <div class="col">
              <p>Age: <span>{{furries.Age}} Years</span></p>
            </div>
            <div class="col">
              <p>Enclosure: <span>{{furries.EnclosureName}}</span></p>
            </div>
            <div class="col">
              <p>Temperament: <span>{{furries.Temperament}}</span></p>
            </div>
          </div>
        </div>
      </div>
     </div>
  </section>

Do you want to hard code the property names in the pipe or do you want to add them as parameter to the pipe? — Batajus
– Batajus, Commented Sep 19, 2018 at 16:06

Batajus · Accepted Answer · 2018-09-19 16:09:39Z

1

You simply can use && (and) or || (or) to solve this:

return items.filter( it => {
    return it.Name.toLowerCase().includes(searchText) 
    || it.SpeciesName.toLowerCase().includes(searchText) // add more conditions
});

answered Sep 19, 2018 at 16:09

Batajus

6,3453 gold badges28 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Issam EL-GUERCH · Accepted Answer · 2018-09-19 16:09:09Z

1

replace return statement by:

return it.Name.toLowerCase().includes(searchText)||
it.Nickname.toLowerCase().includes(searchText)||
it.SpeciesName.toLowerCase().includes(searchText)||
.
.
.
.
;

answered Sep 19, 2018 at 16:09

Issam EL-GUERCH

4243 silver badges8 bronze badges

Collectives™ on Stack Overflow

Using a Pipe in Angular to Filter multiple properties

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related