What is difference of property and attribute in angular.

What is the difference between HTML element attribute and DOM property

1. Attributes are defined by HTML, where as properties are defined by the DOM.
2. Attributes initialize DOM properties. Once the initialization complete, the attributes job is done.
3. Property values can change, where as attribute values can't.

The distinction between an HTML attribute and a DOM property is important in understanding binding in Angular.

HTML is a set of written instructions for how to display a web page.

The browser reads the HTML and creates something called a DOM, a Document Object Model. This is the manifestation of those HTML instructions in memory.

Changing the HTML doesn’t automatically update the webpage unless the user refreshes the browser, changing the DOM however instantly updates the webpage.

There is mostly a 1-to-1 mapping between the names and values of HTML attributes and their equivalent DOM properties, but not always.

The hidden HTML attribute is a good example, it only needs to exist on an HTML element to instruct the browser to hide the element.

So hidden="true" hides the element but confusingly so does hidden="false" in HTML we just need to add hidden to hide the element.

The DOM representation of the hidden attribute is a property also called hidden, which if set to truehides the element and false shows the element.

Angular doesn’t manipulate HTML attributes, it manipulates DOM properties because the DOM is what actually gets displayed.

So when we write [hidden] we are manipulating the DOM property and not the HTML attribute.

This is why the above is called Input Property Binding and not Input Attribute Binding.