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


Angular Problem Overview

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 [ERROR ->]colspan="{{count}}">

What I've tried is:

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

What I want:

enter image description here

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.

Angular Solutions

Solution 1 - Angular

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.


All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionAhmer Ali AhsanView Question on Stackoverflow
Solution 1 - AngularHitesh KansagaraView Answer on Stackoverflow