title: How to use property binding with td attribute colspan in angular?
body: <p>I was working on table element in angular. Al through my code works fine. But when I need to implement property binding on <code>td</code> attribute <code>colspan</code> its showing me below error in browser console:</p>
  
  <pre><code>Uncaught Error: Template parse errors:
    Can't bind to 'colspan' since it isn't a known property of 'td'. ("Total Rows:
                      &lt;/td&gt;
                      &lt;td [ERROR -&gt;]colspan="{{count}}"&gt;
                        {{rows}}
                      &lt;/td&gt;
  </code></pre>
  
  <p><strong>What I've tried is:</strong></p>
  
  <pre><code>&lt;table class="table table-hover" width="100%"&gt;
      &lt;tr&gt;
          &lt;th *ngFor="let col of columns"&gt;
              {{col}}
          &lt;/th&gt;
      &lt;/tr&gt;
      &lt;tr *ngFor="let data of getFilteredData"&gt;
          &lt;td *ngFor="let col of columns"&gt;
              {{data[col]}}
          &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td colspan="{{count}}"&gt;
              Total Rows: {{rows}}
          &lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p><strong>What I want:</strong></p>
  
  <p><a href="https://i.stack.imgur.com/jHe91.png" rel="noreferrer"><img src="https://i.stack.imgur.com/jHe91.png" alt="enter image description here"></a></p>
  
  <p>In my .ts file I give <code>count</code> value to the length of columns array so what ever the columns length are my footer cell have equally distributed using property binding.</p>
  
  <p>I also try:</p>
  
  <ul>
  <li>[colspan]="count"</li>
  <li>colspan="'count'"</li>
  </ul>
  
  <p>but none of this worked and showing the same error.</p>