Angular 2 doesn’t like attributes but still offers attribute bindings

Data binding is a relationship between an HTML widget and data source. This relationship allows applications to display data values to a user and respond to user actions (clicks, touches, keystrokes). This relationship facilitates this, without needing to manually push application data values into the HTML, attach event listeners, pull changed values from the screen, and update application data values. It’s like the application data values are wired directly to the HTML widget.

Angular 2’s data binding is meant to work with DOM properties instead of HTML attributes. See the following excerpt from the template syntax page.

In the world of Angular, the only role of attributes is to initialize element and directive state. When we data bind, we’re dealing exclusively with element and directive properties and events. Attributes effectively disappear.

angular 2  binds with properties not attributes except sometimes ...

attribute binding syntax, the exception

Despite calling attribute bindings an exception, Angular 2 still lets us bind to attributes with following syntax.

<div [attr.role]="myAriaRole">

This binds the role attribute to the result of expression myAriaRole.

This syntax is allowed because not all HTML attributes have corresponding DOM properties. ARIA attributes are one example of this. So it looks like we can work with ARIA in Angular 2, so don’t let the documentation scare you.