Attribute Binding In Angular 6

In my last article, I explained what data binding is and what are its various types in Angular 6. In this article, I will cover one more binding - Attribute binding. We will see what attribute binding is and how we implement it in Angular 6. 

Attribute Binding

Attribute binding is useful where we don’t have any property in DOM respected to an HTML element attribute. Let’s try to understand this statement with the help of an example.

Suppose, you want to create a table with some columns and want to merge these columns into a single column using the colspan attribute of the <td> element just like below. The value of this colspan attribute will be set up through property binding dynamically from the component.

attribute-binding-demo.component.html

<h2>Attribute Binding Demo</h2>
<table>
    <tr>
        <td [colspan]="colSpanValue"></td>
    </tr>
</table>

attribute-binding-demo.component.ts

export class AttributeBindingDemoComponent implements OnInit {
    colSpanValue = 2;
    constructor() {}
    ngOnInit() {}
}

In our above example, I want to bind colSpan value with the colspan attribute of td element in HTML. Let’s run our app to see the output.

Output

 

We can see an error in our console window. The error is – “Can’t bind to ‘colspan’ since it is not a known property of <td> element”, which is true.

Let’s understand the difference between HTML and DOM before understanding this error.

Difference between HTML and DOM (Document Object Model)

DOM is a model of objects that represent the structure of a document. It’s indeed a hierarchical structure of HTML elements in memory.

HTML is a markup language that is used to represent the DOM in the text. It’s indeed a textual representation of DOM in HTML document.

 

That means when your browser parses your HTML document, it creates a tree of objects in memory that is called DOM. Here is one of the most important things we need to know -- most of the attributes of HTML elements have the one-to-one mapping with the properties of DOM objects (as shown in the below picture).

Just like src, the attribute of the <img> element has the one-to-one mapping with src property of the <img> DOM element.

However, there are a few exceptions like we have some attributes of HTML elements that do not have representation as properties in DOM.

For Example,

<td [colspan] = ”colSpan” ></span>

Here, colspan is an example of the same. So when your browser parses this HTML and creates a DOM object for this <td> element and that DOM object does not have a property called colspan, that’s why we get that error in the console.

Same here, there are some properties in the DOM that do not have a representation in HTML.

For Example,

<h1 [textContent] = “headerValue” ></h1>

Here textContent is a property of DOM that does not have a representation in the HTML.

Now the conclusion is when using property binding, we should remember that we are actually binding to a property of DOM object and not an attribute of an HTML element.

Now let’s come back to the same example where we were getting an error when binding colspan attribute of the <td> element with a property of a component. To fix it and bind this attribute of the <td> element, you need to use a different syntax like use “ATTR” in the prefix,

attribute-binding-demo.component.html

<h2>Attribute Binding Demo</h2>
<table>
    <tr>
        <td [attr.colspan]="colSpanValue" style="background-color: red">td1</td>
    </tr>
</table>

Summary

Attribute binding is used for those attributes of HTML element which do not have representation in DOM. Property binding does not work for such attributes.

You can download the complete project with attribute binding example from attachment.

Write to me in the comment box in case you need any help or you have any questions or concerns. Have a good day!