Use existing filter to filter on multiple columns in angular

Question

So I'm working with filters and my issues is that I got the filter working on a single column how do i use this existing filter to search multiple columns .I'm a newbie to angular and unable to wrap my head around this any guidance will be much helpful

HTML

<input type="text" placeholder="Enter INC to search" class="float-right mt-4 mr-4 form-control w-20" [(ngModel)]="searchQuery" (ngModelChange)="searchtable('issues', issues)">

<table class="table" id="someID">
                                    <thead>
                                        <tr>
                                            <th>id</th>
                                            <th>name</th>
                                            <th>Domain</th>
                                            <th>age</th>
                                            <th>date</th>
                                            
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr *ngFor="let x of issues | FilterPipe: ticketNumber ">
      
                                            <td>{{ x.id}}</td>
                                            <td>{{ x.name }}</td>
                                            <td>{{ x.age }}</td>
                                            <td>{{ x.type }}</td>
                                            <td>{{ x.phone }}</td>
                                            <td>{{ x.date }}</td>

                                        </tr>
                                    </tbody>
                                </table>

ts file

 public searchtable(type, data) {
    if (this.searchQuery === "") {
      this.isSearching = false;
      if (type === "requests") {
        this.requests = this.allRequests;
      } else if (type === "issues") {
        this.issues = this.allIssues;
      }
    } else {
      this.isSearching = true;
      if (type === "requests") {
        this.requests = this.allRequests.filter(res => {
          return res.id.toLocaleLowerCase().match(this.searchQuery.toLocaleLowerCase());
        });
      } else if (type === "issues") {
        this.issues = this.allIssues.filter(res => {
          return res.id.toLocaleLowerCase().match(this.searchQuery.toLocaleLowerCase());
        });
      }
    }
  }

pipe.ts

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

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

  transform(value: any, input: any): any {
   if (input) {
     return value.filter(val => val.toLowerCase().indexOf(input.toLowerCase()) >= 0);
   } else {
     return value;
   }
  }

}

Pateta · Accepted Answer · 2021-12-16 01:08:46Z

2

You can also pass an object to your pipe. Something like this:

<div *ngFor="let x of issues | FilterPipe: {ticketNumber, someKey: someValue}">
  {{x | json}}
</div>

input in your pipe will contain that values and you can use them all.

A side note: I would recommend naming variables based on context. eg. issue of issues instead of x of issues and TicketFilterPipe instead of FilterPipe, etc...

edited Dec 16, 2021 at 1:08

answered Jun 21, 2021 at 21:15

Pateta

4294 silver badges16 bronze badges

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

Collectives™ on Stack Overflow

Use existing filter to filter on multiple columns in angular

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related