How to set the width of a column of a dynamic HTML table

Question

I have code as below

 <table >
    <thead >
        <th *ngFor="let col of workData.columns;trackBy: trackByColumn;
            let hindex=index;" [ngClass]="setWidth(col)" [index]="hindex">
        </th>
    </thead>
</table>


 //TS File

  setWidth(col){
   if(col.field === 'First Name') {
   col.width = '100px';
 }
}

In the above table, I get both column names List and column Data from the Http call and render the table based on it. How do I dynamically set width for each column based on its name.

for ex:

Column: First Name Width:100px Column: Last Name Width:90px Column: Address Width: 150px

I am using Angular 6. I tried javascript solutions and also with ngClass and ngStyle in angular. But I am not able to get a handle on how to set width to each of the columns.

Answer 1

[ngClass] expects an object. You are calling a method that returns nothing

One possible way is to bind the style property.

component.ts

  public styles=
  {
    'First Name' : '100px',
    'Last Name' : '90px',
    'Address' : '150px'
  };

component.html

 <table >
    <thead >
        <th [style.width]="styles[col.field]" 
            *ngFor="let col of workData.columns; let hindex=index;" >
          {{col.field}}
        </th>
    </thead>
</table>

Stackblitz demo

You could do the same with classes (e.g. class=classes[col.field])