Is there any way to change text color of igx-grid-cell based on text

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

Hello Ashish,

After investigating this further, I determined that your requirement could be achieved by checking whether the cell value of some column equals the text from the textColor property of that column:

private successCondition = (rowData: any, columnKey: any): boolean => {

  var text1;

  this.columns.forEach((column) => {

    if(column.field == columnKey){

      text1 = column.textColor[0].text;

      console.log(column.textColor[0].text)

    }

      });

        return rowData[columnKey] ==  text1;

    }

 

Additionally the definition of the columns could look as follows:

<igx-column *ngFor="let col of columns" [field]="col.field"

         [header]="col.title ? col.title : col.field" [cellClasses]="col.textColorChange ? beatsPerMinuteClasses: ''"></igx-column>

 

I have prepared a sample, demonstrating the described behavior. Please test it on your side and let me know if you need any further information regarding this matter.

Regards,
Monika Kirkova,
Infragistics