Set html td width based on variable-CodePudding

I currently have a p-table in my html which loops through a list of categories and creates the colspan based on how many categories there are:

            <ng-container *ngFor="let category of this.categoryList ">
              <th
                [attr.colspan]="category.columnNumber"
                style="white-space: normal; padding: 0.4;"
              >
                {{ category.name }}
              </th>
            </ng-container>

However, i am trying to make the style width attribute based off the colspan. So if the colspan is 2, the width would be 200px. If the colspan was 4, it would be 400px and so on.

Is this possible to do?

CodePudding user response：

Use ngClass.

Define your classes:

w-200: {
  width: 200px;
}

w-400: {
  width: 400px;
}
// etc

Then in your template add ngClass and a configuration object.

<th [attr.colspan]="category.columnNumber" 
    style="white-space: normal; padding: 0.4;"
    [ngClass]="{w-200: category.columnNumber === 2, 'w-400': category.columnNumber === 4}">
      {{ category.name }}
</th>