Presents the IO/guide/prope…

To bind to an element’s property, enclose it in square brackets, [], which identifies the property as a target property. A target property is the DOM property to which you want to assign a value. For example, the target property in the following code is the image element’s src property.

<img [src] ="itemImageUrl">
Copy the code

In this syntax, data flows from the Component’s itemImageUrl to the SRC attribute of the IMG tag. The SRC attribute in parentheses is the target to be assigned.

Brackets tell Angular to treat the value to the right of the bracket equal sign as a dynamic expression. If the brackets are removed, the values to the right of the equals sign are treated as purely static strings.

The brackets, [], cause Angular to evaluate the right-hand side of the assignment as a dynamic expression. Without the brackets, Angular treats the right-hand side as a string literal and sets the property to that static value.

Angular’s confusing distinction between property and attribute

An example:

A common point of confusion is between the attribute, colspan, and the property, colSpan. Notice that these two names differ by only a single letter.

Colspan is an attribute, and colspan is a property.

The following code:

<tr><td colspan="{{1 + 1}}">Three-Four</td></tr>
Copy the code

Causes syntax errors:

Template parse errors: Can’t bind to ‘colspan’ since it isn’t a known native property for simple reasons, td’s native property is colspan, not colspan.

Interpolation and property binding can set only properties, not attributes.

Both Interpolation and property Binding only apply to properties, not attributes.

Data binding works with properties of DOM elements, components, and directives, not HTML attributes.

Attributes Initialize DOM properties and you can configure them to modify an element’s behavior. properties are features of DOM nodes.

Properties is a DOM node feature.

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

Some HTML attributes have a one-to-one property value, such as ID

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

Some HTML attributes lack a one-to-one property, such as the ARIA -* family, which has no DOM property

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

Some DOM properties have no corresponding attribute, such as textContent.

In Angular, the only role of HTML attributes is to initialize element and directive state.

The only function of an HTML attribute in an Angular application is to initialize the state of element and Directive.

Here’s an example:

When the browser renders , It sets a corresponding DOM node with a value property and initializes that value to “Sarah”.

When the browser renders the input node, it creates the corresponding DOM node with the value property assigned to Sarah.

The user then types Jerry into the input, and the DOM node’s value property value changes to Jerry. However, the following code checks the value attribute value, which is still Sarah:

input.getAttribute('value')
Copy the code

The HTML attribute value specifies the initial value; the DOM value property is the current value.