Power to 2 and 3 from inside TS file for p-table

Question

I have a p-table called cols:

TS file:

public cols: any[];
    
   public ngOnInit(): void {
    this.cols = [
      { field: 'length', header: 'Length (m)' },
      { field: 'width', header: 'Width (m)' },
      { field: 'height', header: 'Height (m)' },
      { field: 'area', header: 'Area (m2)' },
      { field: 'volume', header: 'Volume (m3)' },
    ];
  }

HTML file:

<p-table [value]="cols">
    <ng-template pTemplate="header">
        <tr>
            <th *ngFor="let col of cols">
                {{col.header}}
            </th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-col>
        <tr>
            <td *ngFor="let col of cols">
                {{col[col.field]}}
            </td>
        </tr>
    </ng-template>
</p-table>

Area and Volume are respectively in square meter and cubic meter. How should I modify Area (m2) and Volume (m3) so that they show m to the power 2 and 3 in correct format?

I have already tried tags, but it did not help:

 this.cols = [
      ....
      { field: 'area', header: 'Area (m<sup>2</sup>)' },
      { field: 'volume', header: 'Volume (m<sup>3</sup>)' },
    ];

EDIT: Please note that my issue is not how to populate the results (numbers), rather how to show the headers correctly. To make it clear what I mean by correct and incorrect formats see this:

Right now the exponents in the headers are shown in incorrect format.

Does this answer your question? [Angular HTML binding](https://stackoverflow.com/questions/31548311/angular-html-binding) — Kaustubh Badrike, Sep 25 '20 at 17:12

Kaustubh Badrike · Answer 1 · 2020-10-13T19:13:42.417

1

Try:

ts

this.cols = [
      ....
      { field: 'area', header: 'Area (m<sup>2</sup>)' },
      { field: 'volume', header: 'Volume (m<sup>3</sup>)' },
];

html

<ng-template pTemplate="body" let-col>
    <tr>
        <ng-container *ngFor="let col of cols">
            <td [innerhtml]="col[col.field]"></td>
        </ng-container>
    </tr>
</ng-template>

Same as : https://stackoverflow.com/a/34424375/8944414 StackBlitz

edited Oct 13 '20 at 19:13

answered Sep 27 '20 at 12:51

Kaustubh Badrike

580
2
15

You suggested this link before, but as I said it does not answer my question. My issue is NOT how to show the numbers (results), rather how to show the "headers" in correct format. See the the updated version of the question. – Alpha Bravo Charlie ... Sep 28 '20 at 08:36
That link **does** answer your question, because the concept remains the same. [Here's a working demo](https://stackblitz.com/edit/angular-ivy-69jrwi). Instead of expecting a complete implementation, try understanding existing answers first to then apply the concept to your particular use-case. – Kaustubh Badrike Sep 28 '20 at 15:42

Power to 2 and 3 from inside TS file for p-table

1 Answers1