I am using ignite ui for the first time in angular. I am facing some problem. Basically I have created library for ignite ui grid and consuming it. I want to make particular grid cell text color change based on text which i am passing in my grid columns like this( in 2nd object using property textColorChange and textColor)

{
            field: 'ProductName',
            resizable: true,
            sortable: true,
            filterable: true,
            isTooltip: true,
            isHtml: true,
         },
         {
            field: 'QuantityPerUnit',
            filterable: true,
            sortable: true,
            columnWidth: '200px',
            textColorChange: true,
            textColor: [{text: 'Success', color: 'green'},{text: 'Failure', color: 'red'}]
         },

I am using ignite ui for the first time in angular. I am facing some problem. Basically I have created library for ignite ui grid and consuming it. I want to make particular grid cell text color change based on text which i am passing in my grid columns like this( in 2nd object using property textColorChange and textColor)

{
            field: 'ProductName',
            resizable: true,
            sortable: true,
            filterable: true,
            isTooltip: true,
            isHtml: true,
         },
         {
            field: 'QuantityPerUnit',
            filterable: true,
            sortable: true,
            columnWidth: '200px',
            textColorChange: true,
            textColor: [{text: 'Success', color: 'green'},{text: 'Failure', color: 'red'}]
         },

above object states that in column QuantityPerUnit if I found Success keyword then change the text color to green, same for Failure keyword also or any keyword.

This is I tried:

html

  <igx-column
         #col
         *ngFor="let column of columns"
         [field]="column.field"
         [header]="column.title ? column.title : column.field"
         [dataType]="column.dataType ? column.dataType : 'string'"
         width="{{ column.columnWidth ? column.columnWidth : config.defaultColumnWidth }}"
         [cellClasses]="column.textColorChange ? textColorChangeClasses: ''"
      >

ts

private successTextColorCondition(rowData: any, columnKey: any): boolean {
    return rowData[columnKey] === this.columns.forEach((text) => {
      text.textColor['text']
    })
  }
  private failureTextColorCondition(rowData: any, columnKey: any): boolean{
    return rowData[columnKey] === 'Failure'
  }
  textColorChangeClasses = {
    successText: this.successTextColorCondition
  };

.scss

.successText {
   color: $success-text-color
}

But I am getting error core.js:4352 ERROR TypeError: Cannot read property 'columns' of undefined

Is this correct way to do it? or is there any other way to achieve this.

I took help of this stackblitz https://stackblitz.com/github/IgniteUI/igniteui-live-editing-samples/tree/master/angular-demos/grid/grid-cell-styling