Binding to properties and attributes – Danger You Need to Know This!

The distinction between an HTML attribute and a DOM property is one of the corner stones for understanding how binding in Angular works!

There are three distinct representations of the application data:

  • The HTML document is a collection of elements: consisting of HTML  tags and attributes both of type string
  • The DOM tree is a JavaScript object of type HTMLInputElement. The HTMLInputElement object includes the property type and value of type DOMString, and required of type boolean. It is the browser that instantiates the DOM objects (nodes) from the HTML document, that have properties which are rendered onto the web-page. Whenever the values of the DOM node’s properties are changed, the page is re-rendered. Reference online.

 

One-way Property Binding

One-way Attribute Binding

One Reply to “Binding to properties and attributes – Danger You Need to Know This!”

Leave a Reply

Your email address will not be published. Required fields are marked *