How to use property binding with td attribute colspan in angular? [duplicate]

Question

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

Here, colspan is not a property of td element. colspan is an attribute. so we have to add prefix attr to colspan to tell angular that it is an attribute if we not write attr prefix then angular consider it property so it will throw error.