How to use property binding with td attribute cols

Question

This question already has answers here:

Why is colspan not a known native attribute in Angular 2? (3 answers)

Closed 2 years ago.

I was working on table element in angular. Al through my code works fine. But when I need to implement property binding on td attribute colspan its showing me below error in browser console:

Uncaught Error: Template parse errors:
  Can't bind to 'colspan' since it isn't a known property of 'td'. ("Total Rows:
                    </td>
                    <td [ERROR ->]colspan="{{count}}">
                      {{rows}}
                    </td>

What I've tried is:

<table class="table table-hover" width="100%">
    <tr>
        <th *ngFor="let col of columns">
            {{col}}
        </th>
    </tr>
    <tr *ngFor="let data of getFilteredData">
        <td *ngFor="let col of columns">
            {{data[col]}}
        </td>
    </tr>
    <tr>
        <td colspan="{{count}}">
            Total Rows: {{rows}}
        </td>
    </tr>
</table>

What I want:

In my .ts file I give count value to the length of columns array so what ever the columns length are my footer cell have equally distributed using property binding.

I also try:

• [colspan]="count"
• colspan="'count'"

but none of this worked and showing the same error.

Answer 1

try this,

If you want to bind to an attribute use [attr.colspan]="count" syntax