How to create a Angular pipe that filters a string by substring and removes it

935 Views Asked by At

I would like to create an angular pipe that filters a string by substring and if the substring occurs, it returns a new filtered string.

The difficulty for me here is that the filter has to work on two separate items.

Here is the relevant part of my template:

<span class="type">{{ item.type | filterTypeNames }}</span>
<span class="name">{{ item.name | filterTypeNames }}</span>

Here is my pipe:

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

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

  transform(value: string, ...args: any[]): any {
    // Many different substrings are possible here (used 'TEST' for testing)
    if (value.indexOf('TEST') !== -1) { 

    } else {
      return value;
    }
  }
}

Here is an example of how the pipe should work:

If the type is "TEST" and the name is "TEST-A1" the pipe should return "TEST-A1". So the substring "TEST" should not be display again.

So:

TEST
TEST-A1

Should became:

TEST-A1

..and only be displayed in the span with the class "type". The span with the class "name" should be empty.

If name and type are different, then nothing should change. For example:

TEST
BLABLA-A1

..should stay the same.

I currently have no idea how I can combine or compare the values ​​and would be grateful for any help.

0

There are 0 best solutions below