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

Question

If we attempt code like this:

Column

or this:

Colu         


        

Answer 1

Attributes & properties in Angular:

When the browser parses the HTML it will create an in memory DOM representation of the parsed HTML. What the data from the attributes often will become initial values for properties which are present in the DOM.

Since colspan isn't a DOM property of an but colSpan (capital letter S) is one you will have to use the colSpan property. Here is an element shown in chrome devtools:

We can see that the html attributes are saved in the attribute DOM property. It is important to realise that the current colspan is reflecting in the DOM colSpan property which can be observed below in the image.

When you are using property binding in Angular you are binding literaly 1 to 1 with these DOM properties. So in order to bind to the colSpan property we would need the following syntax:

Column

We can also bind directly to attributes in Angular, as you pointed out with the following syntax:

Column

Why does the DOM exhibit this inconsistency?

1. For consistency reasons all DOM properties are lower camel cased
2. Not all attributes can be transformed into DOM properties in a 1 to 1 fashion. Take for example the class attribute, we can see in the example image that the class attribute in our HTML results in 2 DOM properties (classList, className).