Using multiple pipes in Angular 4 with Typescript to manipulate values

Question

Using multiple pipes in Angular 4 with Typescript to manipulate values

I've developed a custom pipe called 'filterBy' and I want to implement it in my application. Most of it is functioning well, but I am facing challenges when trying to use this pipe for multiple properties. Allow me to elaborate on what I am struggling with.

Custom Pipe Definition

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

@Pipe({
  name: 'filterBy',
  pure: false
})

@Injectable()
export class FilterBy implements PipeTransform {
  transform( array: Array<any>, filterField: string, filterValue: string, filterField2: string, filterValue2: any): Array<any> {
    if (!array) return [];
    return array.filter(item => item[filterField] === filterValue);
  }
}

products.component.html

<div class="col-sm-1 lessmargins" *ngFor="let product of products | filterBy: 'condition': 'new'"

Although the above snippet works fine, each product has properties such as condition, prices, etc. For instance, I would like to display products with 'condition' : 'new' and 'condition' : 'used' simultaneously, but I am unsure how to achieve this. I attempted the following approach: products.component.html

*ngFor="let product of products | filterBy: {'condition': 'new'} && {'condition' : 'used'}"

Unfortunately, it did not yield the desired result. Is there an issue with my pipe implementation? Could someone provide clarification or guidance?

angular typescript filter pipe components

Answer 1

Answer №1

To filter based on multiple properties, create an array of filters containing the properties you want to filter on and pass it to the pipe. Iterate through the array of properties within the pipe to ensure all match. Here's an example:

Create a Filter class for your filters:

export class Filter {
    public name: string;
    public value: any;
}

Then, add new filters to an array and use this array in your pipe:

<div class="col-sm-12" *ngFor="let product of products | filterBy: filters">
</div>

Next, loop through the array of filters inside your pipe:

import { Injectable, Pipe, PipeTransform } from '@angular/core';
import { Filter } from './filter';

@Pipe({
  name: 'filterBy',
  pure: false,
})
export class FilterBy implements PipeTransform {
  transform( array: Array<any>, filters: Array<Filter>): Array<any> {
    if (!array) return [];
    if (!filters) return array;

    return array.filter(item => matchAll(item, filters));
  }
}

function matchAll(item: any, filters: Array<Filter>): boolean {
  let valid = true;
  for (const filter of filters) {
    if (!hasKey(item, filter.name)
      || item[filter.name] !== filter.value) {
      valid = false;
      break;
    }
  }

  return valid;
}

function hasKey(item: any, keyName: string): boolean {
  return Object.keys(item).indexOf(keyName) !== -1;
}

Answer 2

To filter based on multiple properties, create an array of filters containing the properties you want to filter on and pass it to the pipe. Iterate through the array of properties within the pipe to ensure all match. Here's an example:

Create a Filter class for your filters:

export class Filter {
    public name: string;
    public value: any;
}

Then, add new filters to an array and use this array in your pipe:

<div class="col-sm-12" *ngFor="let product of products | filterBy: filters">
</div>

Next, loop through the array of filters inside your pipe:

import { Injectable, Pipe, PipeTransform } from '@angular/core';
import { Filter } from './filter';

@Pipe({
  name: 'filterBy',
  pure: false,
})
export class FilterBy implements PipeTransform {
  transform( array: Array<any>, filters: Array<Filter>): Array<any> {
    if (!array) return [];
    if (!filters) return array;

    return array.filter(item => matchAll(item, filters));
  }
}

function matchAll(item: any, filters: Array<Filter>): boolean {
  let valid = true;
  for (const filter of filters) {
    if (!hasKey(item, filter.name)
      || item[filter.name] !== filter.value) {
      valid = false;
      break;
    }
  }

  return valid;
}

function hasKey(item: any, keyName: string): boolean {
  return Object.keys(item).indexOf(keyName) !== -1;
}

Using multiple pipes in Angular 4 with Typescript to manipulate values

Answer №1

Similar questions

Tips for sending just the updated section of the form

Typescript - Iterating through CSV columns with precision

Transmit information from child to parent as needed using @input and @output in Angular 2

The width of the Ion-slide is dynamically determined by the styling

"Enhance Your Text Fields with Angular2 Text Masks for Added Text Formatting

The TypeScript Type inside the Node Module Doesn't Seem to Be Functioning

Encountering a Next.js TypeScript Build Error related to the Type 'OmitWithTag<InputFormProps, keyof PageProps, "default">' issue

Retrieve the md-sidenav-layout element within a TypeScript file component

Angular2 emitter does not function properly when using classes in different files

Error: Issue with accessing the 'get' property of an undefined value (Resolved issue with incompatible imports not functioning)

Leveraging conditional types and optional variables in Typescript to translate a string into another form

The TypeScript error message states that a value of 'undefined' cannot be assigned to a type that expects either a boolean, Connection

TestCafe has encountered an issue: "There are no tests available to run. This may be due to either the test files not containing any tests or the filter function being too

Infer the types and flatten arrays within arrays

The struggle of implementing useReducer and Context in TypeScript: A type error saga

A guide on exposing TypeScript classes globally through a WebPack bundle in JavaScript

Implementing a new field in a Node.js model using MongoDB

How to test Angular HttpClient in protractor end-to-end testing

What is the method to retrieve the total number of days in a moment-jalaali using NodeJS?

What is the correct way to implement fetch in a React/Redux/TS application?