Angular set pipe format to property element

Question

There is any way the apply a pipe format in HTML from parameter ?

parent.html

<myEl [columns]="columns" [rows]="rows" />

parent.ts

 this.columns:GridColumn[] = [
      {
        label: 'Data',
        dataKey: 'date',
        type: 'date', 
        pipe: " | amParse: YYYY-MM-DD HH:mm | amDateFormat: DD/MM/YYYY",
      },

myElComponent.html

   <ng-container *ngFor="let row of rows">
      <div>
        <ng-container *ngFor="let col of columns">  
            {{ row[col.dataKey] col.pipe  }} 
        </ng-container>
      </div>
    </ng-container>

Its render all data but not format the value

2022-07-01T00:00:00-03: 00  | amParse: YYYY-MM-DD HH:mm | amDateFormat: DD/MM/YYYY 

Answer 1

What you are currently trying to do is pass a pipe as a variable, but you are passing a string instead. So this line: {{ row[col.dataKey] col.pipe }} simply concatenates the 2 string. As far as I know, you cant pass a pipe as a variable, so here is a work around:

1. For your GridColumn.pipe, pass a variable (string, enum or const), for example: "a" or "b". Instead of the actual pipe.

 this.columns:GridColumn[] = [
      {
        label: 'Data',
        dataKey: 'date',
        type: 'date', 
        pipe: "a",
      },

2. Create a custom pipe for your application.

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({name: 'customPipe'})
export class CustomPipe implements PipeTransform {
  transform(value: string, param?: string): string {
    if(param == 'a') {
      return value.toLowerCase();
    }
    if(param == 'b') {
      return value.toUpperCase();
    }
    return value;
  }
}

3. Modify myElComponent.html and use your new custom pipe and pass the pipe parameter.

<ng-container *ngFor="let row of rows">
    <div>
        <ng-container *ngFor="let col of columns">
            {{ row[col.dataKey] | customPipe: col.pipe }} 
        </ng-container>
    </div>
</ng-container>