From 7a183c9920e6b13cd44af311f0c51f863250514c Mon Sep 17 00:00:00 2001 From: Stalin Date: Tue, 27 Apr 2021 07:18:10 -0500 Subject: [PATCH] docs: translate-first-revision content\guide\binding-syntax.md (#328) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Daniel Díaz <36966980+dalejodc@users.noreply.github.com> --- aio/content/guide/binding-syntax.en.md | 318 +++++++++++++++++++++++++ aio/content/guide/binding-syntax.md | 196 +++++++-------- 2 files changed, 410 insertions(+), 104 deletions(-) create mode 100644 aio/content/guide/binding-syntax.en.md diff --git a/aio/content/guide/binding-syntax.en.md b/aio/content/guide/binding-syntax.en.md new file mode 100644 index 0000000000..0bd41cf77d --- /dev/null +++ b/aio/content/guide/binding-syntax.en.md @@ -0,0 +1,318 @@ + +# Binding syntax: an overview + +Data-binding is a mechanism for coordinating what users see, specifically +with application data values. +While you could push values to and pull values from HTML, +the application is easier to write, read, and maintain if you turn these tasks over to a binding framework. +You simply declare bindings between binding sources, target HTML elements, and let the framework do the rest. + +
+ +See the for a working example containing the code snippets in this guide. + +
+ +Angular provides many kinds of data-binding. Binding types can be grouped into three categories distinguished by the direction of data flow: + +* From the _source-to-view_ +* From _view-to-source_ +* Two-way sequence: _view-to-source-to-view_ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Type + + Syntax + + Category +
+ Interpolation
+ Property
+ Attribute
+ Class
+ Style + 		+ + + {{expression}} + [target]="expression" + bind-target="expression" + + + + One-way
from data source
to view target +
+ Event + + + (target)="statement" + on-target="statement" + + + One-way
from view target
to data source +
+ 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 `()`, +or preceded by a prefix: `bind-`, `on-`, `bindon-`. + +The *target* of a binding is the property or event inside the binding punctuation: `[]`, `()` or `[()]`. + +Every public member of a **source** directive is automatically available for binding. +You don't have to do anything special to access a directive member in a template expression or statement. + + +### Data-binding and HTML + +In the normal course of HTML development, you create a visual structure with HTML elements, and +you modify those elements by setting element attributes with string constants. + +```html +
Plain old HTML
+ + +``` + +With data-binding, you can control things like the state of a button: + + + +Notice that the binding is to the `disabled` property of the button's DOM element, +**not** the attribute. This applies to data-binding in general. Data-binding works with *properties* of DOM elements, components, and directives, not HTML *attributes*. + +{@a html-attribute-vs-dom-property} + +### 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 (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`. + +It is important to remember that *HTML attribute* and the *DOM property* are different things, even when they have the same name. +In Angular, the only role of HTML attributes is to initialize element and directive state. + +**Template binding works with *properties* and *events*, not *attributes*.** + +When you write a data-binding, you're dealing exclusively with the *DOM properties* and *events* of the target object. + +
+ +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 one exception to this rule. +Attributes can be changed by `setAttribute()`, which re-initializes corresponding DOM properties. + +
+ +For more information, see the [MDN Interfaces documentation](https://developer.mozilla.org/en-US/docs/Web/API#Interfaces) which has API docs for all the standard DOM elements and their properties. +Comparing the [`` attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/td) attributes to the [`` properties](https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableCellElement) 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`. + + +#### Example 1: an `` + +When the browser renders ``, it creates a +corresponding DOM node with a `value` property initialized to "Sarah". + +```html + +``` + +When the user enters "Sally" into the ``, the DOM element `value` *property* becomes "Sally". +However, 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 especially for binding syntax. + +#### Example 2: a disabled button + +The `disabled` attribute is another example. A button's `disabled` +*property* is `false` by default so the button is enabled. + +When you add the `disabled` *attribute*, its presence alone +initializes the button's `disabled` *property* to `true` +so the button is disabled. + +```html + +``` + +Adding and removing the `disabled` *attribute* disables and enables the button. +However, the value of the *attribute* is irrelevant, +which is why you cannot enable a button by writing ``. + +To control the state of the button, set the `disabled` *property*, + +
+ +Though you could technically set the `[attr.disabled]` attribute binding, the values are different in that the property binding requires to a boolean value, while its corresponding attribute binding relies on whether the value is `null` or not. Consider the following: + +```html + + +``` + +Generally, use property binding over attribute binding as it is more intuitive (being a boolean value), has a shorter syntax, and is more performant. + +
+ + +To see the `disabled` button example in a functioning app, see the especially for binding syntax. This example shows you how to toggle the disabled property from the component. + +## Binding types and targets + +The **target of a data-binding** is something in the DOM. +Depending on the binding type, the target can be a property (element, component, or directive), +an event (element, component, or directive), or sometimes an attribute name. +The following table summarizes the targets for the different binding types. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Type + + Target + + Examples +
+ Property + + Element property
+ Component property
+ Directive property + 		+ src, hero, and ngClass in the following: + + +
+ Event + + Element event
+ Component event
+ Directive event + 		+ click, deleteRequest, and myClick in the following: + + + +
+ Two-way + + Event and property + + +
+ Attribute + + Attribute + (the exception) + + +
+ Class + + class property + + +
+ Style + + style property + + +
+ diff --git a/aio/content/guide/binding-syntax.md b/aio/content/guide/binding-syntax.md index 0bd41cf77d..22c51901e8 100644 --- a/aio/content/guide/binding-syntax.md +++ b/aio/content/guide/binding-syntax.md @@ -1,23 +1,21 @@ -# Binding syntax: an overview +# Sintaxis de Enlace: una visión general -Data-binding is a mechanism for coordinating what users see, specifically -with application data values. -While you could push values to and pull values from HTML, -the application is easier to write, read, and maintain if you turn these tasks over to a binding framework. -You simply declare bindings between binding sources, target HTML elements, and let the framework do the rest. +El enlace de datos es un mecanismo utilizado para coordinar los valores de los datos que los usuarios visualizan en la aplicación. +Aunque puedas insertar y actualizar valores en el HTML, la aplicación es más fácil de escribir, leer y mantener si tu le dejas esas tareas al framework de enlace. +Por lo que simplemente debes declarar enlaces entre los datos del modelo y los elementos HTML y dejar al framework que haga el resto del trabajo.
-See the for a working example containing the code snippets in this guide. +Consulta la aplicación de muestra que es un ejemplo funcional que contiene los fragmentos de código utilizados en esta guía.
-Angular provides many kinds of data-binding. Binding types can be grouped into three categories distinguished by the direction of data flow: +Angular proporciona muchas formas para manejar el enlace de datos. Los tipos de enlace se pueden agrupar en tres categorías que se distinguen de acuerdo a la dirección del flujo de datos: -* From the _source-to-view_ -* From _view-to-source_ -* Two-way sequence: _view-to-source-to-view_ +* Desde el _modelo-hacia-vista_ +* Desde la _vista-hacia-modelo_ +* Secuencia Bidireccional: _vista-hacia-modelo-hacia-vista_