AG-Grid with a Custom Color Pipe

user_13614356 0
Viewed 89

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?

enter image description here

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>`
    },
ag-grid angular typescript html javascript
1 Answers

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.

user_119536330
Related