What is the difference between an Attribute and a Property in HTML?

Question

I have created a custom form control (using ControlValueAccessor) for input element, having following code for the writeValue method.

@ViewChild('inputElement', {static: true}) input;    
writeValue(obj: any): void {
    this.renderer.setAttribute(this.input.nativeElement, 'value', obj);
}

This method updates the view (input element) only once, that is when I initialize the form. If I manually patch the value of the form control associates with the above component, the form control gets updated, but the view doesn't get updated.

But, If I use the setProperty method instead of the setAttribute method, as follows,

@ViewChild('inputElement', {static: true}) input; 
writeValue(obj: any): void {
    this.renderer.setProperty(this.input.nativeElement, 'value', obj);
}

The view gets updated.

But the problem is, documents says that value is an attribute in HTML, not a dom property.

Can someone explain what is the difference between an attribute and a property in HTML which makes such behaviour in Renderer2 of Angular?

Pulque

check this #6004319 – Blakemore

@AbhishekEkaanth - thanks, this link's accepted answer is much clearer. – Unwatched

Answer 1

There is an attribute as well as a property called value, for an input element in HTML.

1. Value Property - Represents the current value of the input element.
2. Value Attribute - Represents the initial value of the input element.

So, in HTML, attributes are defined on HTML elements and are supposed to be the initial values passed to them at the time of creating those elements. Once the browser creates the DOM (a.k.a. after rendering the page), the HTML elements become objects (node objects) and hence, they have properties.

Therefore, in order to change the current value of the input element using Renderer2 of angular, you need to use the setProperty method.

If you use, the setAttribute method, it will change the value only once, that is when you are creating the element. It will not change the current value.

Pulque

Answer 2

The Angular documentation states:

HTML attribute vs. DOM property

The distinction between an HTML attribute and a DOM property is key to understanding how Angular binding works. Attributes are defined by HTML. Properties are accessed from DOM, or the Document Object Model, nodes.

A few HTML attributes have 1:1 mapping to properties; for example, id.

Some HTML attributes don't have corresponding properties; for example, aria-*.

Some DOM properties don't have corresponding attributes; for example, textContent.

This general rule can help you build a mental model of attributes and DOM properties: attributes initialize DOM properties and then they are done. Property values can change; attribute values can't.

There is, of course, an exception to this rule because attributes can be changed by setAttribute(), which will re-initialize corresponding DOM properties again.

Comparing <td> attributes to <td> properties provides a helpful example for differentiation. In particular, you can navigate from the attributes page to the properties via "DOM interface" link, and navigate the inheritance hierarchy up to HTMLTableCellElement.

The HTML attribute and the DOM property are not the same thing, even when they have the same name.

Additional Information

What is the difference between properties and attributes in HTML?

Tannenwald