Open In App

Why is colspan not a known native attribute in Angular 2?

Last Updated : 26 Jun, 2020
Improve
Improve
Like Article
Like
Save
Share
Report

In order to understand it, we need to have a clear in-depth knowledge between Document Object Model(DOM) and HyperText Markup Language(HTML).
Basically, DOM is a model of objects and is a logical tree representation of the document whereas HTML is a markup language that we used to build web-pages.
Every HTML attributes have one to one mapping to properties of DOM objects.

Example: First Name




<label for="fname">First Name </label>
<input type="text" id="fname" name="fname" disabled >


So, The above example contains two tags label and input. As we can observe, there is an attribute defined inside the input tag which is “disabled”.
Similarly, if you talk about DOM properties, disabled is also present inside the input object.
But they are cases where some attributes of HTML tags are not available inside the DOM. 
Example: colspan. Like colspan, So when you try to use them for attribute binding in Angular 2+, you will get an error which says “can’t bind to colspan since it isn’t a known property of ‘td’ “.
Similarly, we have some properties which are defined in DOM but are not present in HTML.

Example:




<h2 [textContent]="title"></h1>


Solution:
In order to use them for attribute binding you need to use the following syntax “[attr.colspan]”.




import {Component} from '@angular/core';
  
  
@Component({
  
selector:'app-colspan',
template:
`
<h4> Colspan Usage </h4>
<table>
  <tr>
   <td [attr.colspan]="colSpan">First Item </td>
  </tr>
  <tr>
   <td>Second Item</td>
   <td>Third Item </td>
  </tr>
</table>
`,
styles:[`
  
table, tr, td{
border: 1px solid black;
border-collapse:collapse;
}
`]
})
  
  
export class ColSpanComponent{
  
colSpan="2"
  
}


Output:



Similar Reads

HTML | &lt;td&gt;colspan Attribute
The HTML &lt;td&gt; colspan Attribute is used to specify the number of columns a table should span. Syntax: &lt;td colspan="number"&gt; Attribute Values: It contains the numeric value which specifies the number of columns a cell should span. Example: This Example illustrates the use of colspan attribute in Tabledata Element. &lt;!DOCTYPE html&gt;
1 min read
HTML | &lt;th&gt; colspan Attribute
The &lt;th&gt; colspan Attribute in HTML is used to specify a number of columns a header cell should span. Syntax: &lt;th colspan="number"&gt; Attribute Values: It contains single value number which contains the numeric value to sets the number of column a header cell should span. Example: This example illustrates the use of colspan attribute in
1 min read
HTML colspan Attribute
The colspan attribute in HTML specifies the number of columns a cell should span. It allows the single table cell to span the width of more than one cell or column. It provides the same functionality as "merge cell" in a spreadsheet program like Excel. Note: colspan="0" tells the browser to span the cell to the last column of the column group (colg
3 min read
What is the purpose of the colspan attribute in a HTML Table ?
The colspan attribute in an HTML table is used to specify the number of columns a cell should span horizontally. It enables you to merge multiple adjacent table columns into a single cell, making it useful for creating tables with complex layouts or merging cells across multiple columns. The purpose of colspan is as follows: Combine Cells: The cols
1 min read
HTML | DOM TableData colSpan Property
The Dom TableData colSpan Property in HTML DOM is used to set or return the value of a colspan attribute. The colspan attribute is used to specify the number of columns a table should span. Syntax: It returns the colSpan property. tabledataObject.colSpanIt is used to set the colSpan property. tabledataObject.colSpan = number Property Values: It con
2 min read
HTML DOM TableHeader colSpan Property
The HTML DOM TableHeader colSpan property is used to set or return the value of the colspan attribute. The colspan attribute defines the number of columns that a header cell should span. Syntax: It returns the colSpan property.tableheaderObject.colSpanIt is used to set the colSpan property.tableheaderObject.colSpan = number Property Values: It cont
2 min read
HTML Table Colspan and Rowspan
In HTML, the rowspan attribute specifies how many rows a table cell should span, determining its vertical position. On the other hand, the colspan attribute specifies the number of columns a cell should span, determining its horizontal position. Defining together, they provide a powerful mechanism for cells to cover multiple rows and columns, offer
3 min read
Less known Angular Features You Need to Know
Following are some interesting features of angular that can help you in SEO, application performance improvements, and improving code readability. 1. Title tags: These are displayed on SERPs(Search Engine Results Pages) as the clickable &amp; touchable heading for your search text. They’re important for usability, Search engine optimization and soc
4 min read
How to find the parent class name with known class in jQuery ?
Given an HTML document and the task is to get the parent class of an element with the help of given class name. Approach 1: The on() method is used to select the event handler for selected elements. It means when the user clicks the button then the function call. The closest() method is used to return the first ancestor of the selected elements. Ch
3 min read
Best-Known JavaScript Array Methods
An array is a special variable in all the languages that are used to store different elements. JavaScript array contains some built-in properties that every JavaScript developer should know how to use and when or where to use them. We can use them to add, remove, iterate, or manipulate data as per our requirements. Basic JavaScript Array Methods: T
7 min read