How to pass multiple pipes for ngx-datatable-column in Angular?

Question

I would like to ask if do you have any ideas how to pass multiple pipes in Angular?

Currently, my code is is passing only one pipe.

const customPipe1 = new CustomPipe2();
const customPipe2 = new CustomPipe2();

  <ngx-datatable-column
      [width]="width"
      [name]="cname"
      [prop]="cbindProperty"
      [pipe]="customPipe1">
  </ngx-datatable-column>

I want to add two or multiple pipes in that column. Something like this in a plain html.

{{ birthday | customPipe1 | customPipe2 }}

Answer 1

This is not possible with ngx-datatable. You can see that here in the source code.

You can however create another pipe which does the same:

_{It's not necessary to make it a Pipe using the annotation, because you won't use the name, this way you also don't have to add it to the declarations}

export class ColumnPipe implements PipeTransform {
  pipes: any[] = [
    new BirthdayPipe(),
    new CustomPipe1(),
    new CustomPipe2()
  ];

  public transform(input: any): any {
    return this.pipes.reduce((output, pipe) => pipe.transform(output), input);
  }
}

It could be possible that your inner pipes need to inject some services. In that case you need to add the pipe to the providers array, together with the pipes that needs injecting and inject them in the constructor of the ColumnPipe.