Angular

Last Updated: 6/15/2023

Attribute Binding

  • Document Object Model (DOM) is model of objects that represents the structure of document. It is a tree of objects in memory.
  • Markup language (HTML) used to represent DOM in text
  • Browser parses the html document, it creates tree of objects in memory that is referred to DOM
  • Tree of object can be created programmatically using vanilla JavaScript. HTML is simpler.
  • Most of the attributes of html has one-to-one mapping to the properties of the DOM with same name.
  • Sometimes the attribute and property name may be different.
  • Some attributes of element don't have representation in DOM
  • Some properties of DOM don't have representation in HTML. eg textContent
<td [colspan]="colSpan"></td> 	//error - property and attribute name are different
<td [colSpan]="colSpan"></td>   //using property binding

<td [attr.colspan]="colSpan"></td> //attribute binding
Previous
Next