Thinking in Angular 4: Templates

To understand Angular 4, after the "Hero" tutorial you should start from the Template syntax. 

We highlighted some statement in red below:

Data direction	Syntax	Type
One-way from data source to view target	\{\{expression\}\} [target]="expression" bind-target="expression"	Interpolation Property Attribute Class Style
One-way from view target to data source	(target)="statement" on-target="statement"	Event
Two-way	[(target)]="expression" bindon-target="expression"	Two-way

Binding types other than interpolation have a target name to the left of the equal sign, either surrounded by punctuation ([], ()) or preceded by a prefix (bind-, on-, bindon-).

The target name is the name of a property. It may look like the name of an attribute but it never is. To appreciate the difference, you must develop a new way to think about template HTML.  

The key idea is you are playing with the DOM properties:

<!-- Bind button disabled state to `isUnchanged` property -->
<button [disabled]="isUnchanged">Save</button>

You'll get to that peculiar bracket notation in a moment. Looking beyond it, your intuition suggests that you're binding to the button's disabled attribute and setting it to the current value of the component's isUnchanged property.

Your intuition is incorrect! Your everyday HTML mental model is misleading. In fact, once you start data binding, you are no longer working with HTML attributes. You aren't setting attributes. You are setting the properties of DOM elements, components, and directives.

This is a very tricky part of Angular: be sure to master it because it is the pivotal change in this framework. 

Remember attributes initialize DOM properties and then they are done. Property values can change; attribute values can't.