Filter table in Angular

Question

I have a table with two filter options "Gender" and "Country"! Essentially the filter works, that is I click on the gender dropdown for male or female and the table shows me all the the entries. My issue is, with the way that I have done, I always have to refresh(as in reload the data) the table before I can filter again. Say I have filter for females, I can't directly click on male to show me the male entries, I have to refresh and then I can only filter again. I'm sure its only a matter of one or two lines of code but I just can't seem to figure it out.

Below my methods:

filterByGender(event) {
    let gender = event;
    if (gender === "Male") {
      gender = "M";
    } else if (gender === "Female") {
      gender = "F";
    }
    let filteredGender = this.customerArray
      .filter(customer => customer.gender === gender);
    console.log("filteredGender", filteredGender);
    this.customerArray = filteredGender;

  }

  filterByCountry(event) {
    let country = event;
    let filteredCountry = this.customerArray
      .filter(customer => customer.countryCode === country);
    this.customerArray = filteredCountry;
  }

this.customerArray is the array of all the customers from the backend. Now the reason its not working the way I want to is because I refill the array so I can't do a second filter, but what would be a way around this?

Answer 1

You can actually use Angular Pipe with this if you want to filter your table based on the selected value on your select box

Created 2 Stackblitz Demo based on your preference:

Single Filter Pipe for Table List - Filter by Gender only

Multiple Selection Filter Pipe for Table List - Filter by Gender & Country

TableFilterPipe

Import TableFilterPipe on your Module's Declarations

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

   transform(list: any[], value: string) {

      // If there's a value passed (male or female) it will filter the list otherwise it will return the original unfiltered list. 
      return value ? list.filter(item => item.gender === value) : list;

   }
}

CustomComponent

@Component({
   ...,
   template: `
      <select [(ngModel)]="gender">
         <option value="male">Male</option>
         <option value="female">Male</option>
      </select>

      <table>
          ...
          <tr *ngFor="let user of users | tableFilter: gender">   // Use your pipe here, so whenever there's a change on selectbox, it will filter the list based on the value assigned. 
              <td>{{ user.name }}</td>
              <td>{{ user.gender }}</td>
          </tr>
      </table>

   `
})
export class CustomComponent {
   gender: string;

   users: any[] = [...];

}

Answer 2

 transform(items: Incident[], location_id: string, driver_id: string,
    description: string, type: string,technician_id: string){
    if (items && items.length){
        return items.filter(item =>{
            if (location_id && item.location_id.name.toLowerCase().indexOf(location_id.toLowerCase()) === -1){
                return false;
            }
            if (driver_id && item.driver_id.name.toLowerCase().indexOf(driver_id.toLowerCase()) === -1){
                return false;
            }
            if (description && item.description.toLowerCase().indexOf(description.toLowerCase()) === -1){
              return false;
            }
            if (type && item.incidenttype_id.name.toLowerCase().indexOf(type.toLowerCase()) === -1){
              return false;
            }
            if (technician_id && item.technician_id.name.toLowerCase().indexOf(technician_id.toLowerCase()) === -1){
                return false;
            }

            return true;
       })
    }
    else{
        return items;
    }
}

    enter code here

Answer 3

/*
2022-04-04 To filter tables with a search string
*/
import {
  Pipe,
  PipeTransform
} from '@angular/core';
@Pipe({
  name: 'filterTable',
})
export class FilterTablePipe implements PipeTransform {
  transform(list: any[], value: string) {
    // console.log('FilterTablePipe ' + value);
    // let us return only items that contain the value string, regardless of case
    return value ?
      list.filter((item) =>
        JSON.stringify(item).toLowerCase().includes(value.toLowerCase())
      ) :
      list;
  }
}