Set html td width based on variable

Question

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?

The Head Rush · Accepted Answer · 2022-01-20 17:16:18Z

1

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>

answered Jan 20, 2022 at 17:16

The Head Rush

3,3963 gold badges30 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Set html td width based on variable

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related