Angular *NgFor different class

Question

I'm trying to learn angular with primeng. I am using p-table following this reference https://www.primefaces.org/primeng/#/table and what i want is to provide dynamic width for every column using the ngfor. So far I added another column on the cols array to represent the classes for each column like this.

    this.cols = [
        { field: 'vin', header: 'Vin', class: 't-r' },
        {field: 'year', header: 'Year', class: 't-l' },
        { field: 'brand', header: 'Brand', class: 't-l' },
        { field: 'color', header: 'Color', class: 't-r' }
    ];

html file

<h3>Dynamic Columns</h3>
<p-table [columns]="cols" [value]="cars">
    <ng-template pTemplate="header" let-columns>
        <tr>
            <th *ngFor="let col of columns" [ngClass] = "col.class">
                {{col.header}}
            </th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-rowData let-columns="columns">
        <tr>
            <td *ngFor="let col of columns">
                    {{rowData[col.field]}}
            </td>
        </tr>
    </ng-template>
</p-table>

I think my question is close to this Add classes within ngFor loop but in my case I want the class in the current element instead of the inner one. Okay I've tried different properties and some are working and some are not.

class :

.t-r{
    text-align: right; //working on string but not in date datatype
    width: 500px ; // not working
}

Answer 1

You can try ng-container for that

The ng-container tag is used to group nodes together and support structural directives. Childs nodes are rendered but the tag itself is not rendered.

Here is working demo

 <h3>Dynamic Columns</h3> <p-table [columns]="cols" [value]="cars"> <ng-template pTemplate="header" let-columns> <tr> <ng-container *ngFor="let col of columns"> <th [ngClass] = "col.class"> {{col.header}} </th> </ng-container> </tr> </ng-template> <ng-template pTemplate="body" let-rowData let-columns="columns"> <tr> <td *ngFor="let col of columns"> {{rowData[col.field]}} </td> </tr> </ng-template> </p-table>