How to use Angular pipes in JqxGrid's cell renderer

I am using JqxGrid inside Angular 5, i have some fields in grid which are numbers, and i want to format them with number pipe of angular. but the problem is that jqxGrid is not considering pipe as angular feature and printing it as it is. here is how i am trying to achieve this using cell renderer

    formatNumber = (row, columnfield, value, defaulthtml, columnproperties,rowdata) =>
  { 
      return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + ';">${{' + value + ' | number }}</span>'; 
  };

for example if value is 123456, i am getting ${{123456 |number}} what i want to get is $123,456. i have defined my columns and source in component.ts file.

cellsrenderer function can only return the HTML code hence any angular code wouldn't work when you return that through this function.

Instead you can use the cellsformat property and assign it to the column for which you are having that numeric data.

Refer to the official documentation here:jqxGrid Cells Formatting

Define your columns as below to get the expected output as "$123,456":

let columns: any[] = [];
columns = $.merge(columns,[
     // datafield is the name of the property from which you are assigning value from your data.  
     // text is the name of the column in the grid.
     // cellsformat:"c" indicates currency numbers. 
     {text:"Number Column", datafield:"price", cellsrenderer: this.formatnumber, cellsformat:"c"} 
]);

JSFiddle: Click Here