AG-Grid with a Custom Color Pipe

Issue

In my app, I'm using AG-Grid. In one of the columns, I want to use a custom color pipe that I have created. I'm using cellRenderer to achieve that but I get the error below. My code is below, what am I doing wrong and what should I fix?

Pipe:

@Pipe({ name: 'ticketStateColor' })
export class TicketStateTypePipe implements PipeTransform {

    transform(state: any): string {
        if (state == 1) return 'accent';
        if (state == 2) return 'orange-800';
        if (state == 3) return 'green';
        if (state == 4) return 'orange';
        if (state == 5) return 'red';
        if (state == 6) return 'teal';
        if (state == 7) return 'accent';
        return '';
    }
}

TS:

    {
      columnGroupShow: 'open', headerName: 'Durum', field: 'TicketStateType.Name', cellRenderer: TicketStateTypePipe,
      cellRendererParams:
        `<td mat-cell *matCellDef="let row">
      <div fxLayout="column" fxLayoutAlign="center start">
          <div [ngClass]="params.data.TicketStateType?.Name | ticketStateColor" class="text-boxed mb-2">
              {{params.data?.TicketStateType?.Id}}</div>
      </div>
  </td>`
    },

Solution

You need to pass an Angular component to the cellRenderer property. In that component you can then use your pipe in its template. So the code you have in cellRendererParams would move into a component like this.

@Component({
  selector: 'pipe-component',
  template: ` <div>{{ params.value | ticketStateColor }}</div> `,
})
export class TicketCellRenderer implements ICellRendererAngularComp {
  public params;

  agInit(params: ICellRendererParams): void {
    this.params = params;
  }

  refresh(params: ICellRendererParams) {
    return false;
  }
}

And then in your colDef you would have:

    {
      columnGroupShow: 'open', headerName: 'Durum', field: 'TicketStateType.Name', cellRenderer: TicketCellRenderer
    },

I have setup a working example here for you to extend.

Answered By - Stephen Cooper