CODEWITHSUNDEEP
htmlcsscss-tables
Pippa97
Pippa97

Reputation: 99

Set html td width based on variable

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?

Upvotes: 0

Views: 257

Answers (1)

The Head Rush
The Head Rush

Reputation: 3357

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>

Upvotes: 1

Related Questions