How to format the value of a grid column as USD $ currency?

[brookhutchinson]

Question

How do I format the value of a grid column as USD $ currency?

For some reason every other row in the grid is not immediately displaying the column value. Instead a user has to hover over the missing row column value and then the value displays.

• igniteui-angular version: 8.2.2
• browser: Google Chrome Version 77.0.3865.90 (Official Build) (64-bit)

Here is the code that I am using for my grid column

<igx-column field="annual_credit_value" header="Annual Value" width="100" [dataType]="'number'" [disableHiding]="false" [disablePinning]="false" [filterable]="true" [movable]="false" [resizable]="true" [sortable]="true"> <ng-template let-value> {{ value | currency: 'USD': 'symbol': '1.0-0' }} </ng-template> </igx-column>

[ddincheva]

Hello @brookhutchinson ,
In order to be able to define a custom cell template you need to add the following directive:
IxgCell is used for default cell template;
IgxCellEditor is used when the cell is in edit mode;
You can read more detailed information in our official documentation. Also you can take a look at the code of this sample;
Please check them out, and let us know if you have any concerns

[brookhutchinson]

You mention that I need to add the IgxCell directive to a column that I want to format as currency. The second column in your sample named "Price" looks like it is formatting the value as currency, but does not have an igxCell directive or a <ng-template> defined. Help me understand what I am missing.

[ddincheva]

If you want to add any custom mark up, provide some additional logic or to format the cell value, you can define a custom cell template. Like in the snippet below:

<igx-column field="TestField" header="Value" width="100" [dataType]="'number'"> 
  <ng-template IgxCell let-cell='cell'>
      <div class='sampleClass'> // this is just sample. You can omit the div in your use case
        $ {{ cell.value }} 
     </div>
  </ng-template> 
</igx-column>

If you just need to format the cell value you can just use the column formatter property, as you see in the sample that I linked below.
You can use either approach you decide for this use case.

[brookhutchinson]

How can I format the value of a column to $ USD currency with no numbers after decimal place and allow the user to be able to click a column header to sort the currency values in ascending order or descending order?

[rkaraivanov]

@brookhutchinson

As mentioned above, you can use either the cell template functionality or the column formatter property. You can see them in action here