Data binding automatically keeps your page up-to-date based on your application's state.\nYou use data binding to specify things such as the source of an image, the state of a button, or data for a particular user.
\nSee the
Developers can customize HTML by specifying attributes with string values.\nIn the following example, class, src, and disabled modify the <div>, <img>, and <button> elements respectively.
Use data binding to control things like the state of a button:
\nNotice that the binding is to the disabled property of the button's DOM element, not the attribute.\nData binding works with properties of DOM elements, components, and directives, not HTML attributes.
Angular binding distinguishes between HTML attributes and DOM properties.
\nAttributes initialize DOM properties and you can configure them to modify an element's behavior.\nProperties are features of DOM nodes.
\nA 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.
Remember that HTML attributes and DOM properties are different things, even when they have the same name.
\nIn Angular, the only role of HTML attributes is to initialize element and directive state.
\nWhen you write a data binding, you're dealing exclusively with the DOM properties and events of the target object.
\n<input>linkWhen the browser renders <input type=\"text\" value=\"Sarah\">, it creates a\ncorresponding DOM node with a value property and initializes that value to \"Sarah\".
When the user enters Sally into the <input>, the DOM element value property becomes Sally.\nHowever, if you look at the HTML attribute value using input.getAttribute('value'), you can see that the attribute remains unchanged—it returns \"Sarah\".
The HTML attribute value specifies the initial value; the DOM value property is the current value.
To see attributes versus DOM properties in a functioning app, see the
A button's disabled property is false by default so the button is enabled.
When you add the disabled attribute, you are initializing the button's disabled property to true which disables the button.
Adding and removing the disabled attribute disables and enables the button.\nHowever, the value of the attribute is irrelevant, which is why you cannot enable a button by writing <button disabled=\"false\">Still Disabled</button>.
To control the state of the button, set the disabled property instead.
Though you could technically set the [attr.disabled] attribute binding, the values are different in that the property binding must be a boolean value, while its corresponding attribute binding relies on whether the value is null or not.\nConsider the following:
The first line, which uses the disabled property, uses a boolean value.\nThe second line, which uses the disabled attribute checks for null.
Generally, use property binding over attribute binding as a boolean value is easy to read, the syntax is shorter, and a property is more performant.
\nTo see the disabled button example in a functioning application, see the
Angular provides three categories of data binding according to the direction of data flow:
\n| \n Type\n | \n\n Syntax\n | \n\n Category\n | \n
|---|---|---|
| \n Interpolation \n Property \n Attribute \n Class \n Style\n | \n \n | \n \n One-way from data source to view target\n | \n
| \n Event\n | \n\n | \n \n One-way from view target to data source\n | \n
| \n Two-way\n | \n\n | \n \n Two-way\n | \n
Binding types other than interpolation have a target name to the left of the equal sign.\nThe target of a binding is a property or event, which you surround with square brackets, [], parentheses, (), or both, [()].
The binding punctuation of [], (), [()], and the prefix specify the direction of data flow.
[] to bind from source to view.() to bind from view to source.[()] to bind in a two way sequence of view to source to view.Place the expression or statement to the right of the equal sign within double quotes, \"\".\nFor more information see Interpolation and Template statements.
The target of a data binding can be a property, an event, or an attribute name.\nEvery public member of a source directive is automatically available for binding in a template expression or statement.\nThe following table summarizes the targets for the different binding types.
\n\n| \n Type\n | \n\n Target\n | \n\n Examples\n | \n
|---|---|---|
| \n Property\n | \n\n Element property \n Component property \n Directive property\n | \n \n src, hero, and ngClass in the following:\n | \n
| \n Event\n | \n\n Element event \n Component event \n Directive event\n | \n \n click, deleteRequest, and myClick in the following:\n | \n
| \n Two-way\n | \n\n Event and property\n | \n\n | \n
| \n Attribute\n | \n\n Attribute\n (the exception)\n | \n\n | \n
| \n Class\n | \n\n class property\n | \n \n | \n
| \n Style\n | \n\n style property\n | \n \n | \n