cargdev/angular
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs: translate two way binding (#287)

Browse Source 
* cambios de sintaxicos
* translate: two ways data binding
* archivo en ingles agregado

Closes #233
This commit is contained in:
Antonio Cardenas 2020-10-22 13:25:48 -06:00 committed by GitHub
parent 3686c640d6
commit 32577820f4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 113 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

76
aio/content/guide/two-way-binding.en.md Normal file
View File

@ -0,0 +1,76 @@
# Two-way binding `[(...)]`
Two-way binding gives your app a way to share data between a component class and
its template.
<div class="alert is-helpful">
See the <live-example></live-example> for a working example containing the code snippets in this guide.
</div>
## Basics of two-way binding
Two-way binding does two things:
1. Sets a specific element property.
1. Listens for an element change event.
Angular offers a special _two-way data binding_ syntax for this purpose, `[()]`.
The `[()]` syntax combines the brackets
of property binding, `[]`, with the parentheses of event binding, `()`.
<div class="callout is-important">
<header>
[( )] = banana in a box
</header>
Visualize a *banana in a box* to remember that the parentheses go _inside_ the brackets.
</div>
The `[()]` syntax is easy to demonstrate when the element has a settable
property called `x` and a corresponding event named `xChange`.
Here's a `SizerComponent` that fits this pattern.
It has a `size` value property and a companion `sizeChange` event:
<code-example path="two-way-binding/src/app/sizer/sizer.component.ts" header="src/app/sizer.component.ts"></code-example>
<code-example path="two-way-binding/src/app/sizer/sizer.component.html" header="src/app/sizer.component.html"></code-example>
The initial `size` is an input value from a property binding.
Clicking the buttons increases or decreases the `size`, within
min/max value constraints,
and then raises, or emits, the `sizeChange` event with the adjusted size.
Here's an example in which the `AppComponent.fontSizePx` is two-way bound to the `SizerComponent`:
<code-example path="two-way-binding/src/app/app.component.html" header="src/app/app.component.html (two-way-1)" region="two-way-1"></code-example>
The `AppComponent.fontSizePx` establishes the initial `SizerComponent.size` value.
<code-example path="two-way-binding/src/app/app.component.ts" header="src/app/app.component.ts" region="font-size"></code-example>
Clicking the buttons updates the `AppComponent.fontSizePx` via the two-way binding.
The revised `AppComponent.fontSizePx` value flows through to the _style_ binding,
making the displayed text bigger or smaller.
The two-way binding syntax is really just syntactic sugar for a _property_ binding and an _event_ binding.
Angular desugars the `SizerComponent` binding into this:
<code-example path="two-way-binding/src/app/app.component.html" header="src/app/app.component.html (two-way-2)" region="two-way-2"></code-example>
The `$event` variable contains the payload of the `SizerComponent.sizeChange` event.
Angular assigns the `$event` value to the `AppComponent.fontSizePx` when the user clicks the buttons.
## Two-way binding in forms
The two-way binding syntax is a great convenience compared to
separate property and event bindings. It would be convenient to
use two-way binding with HTML form elements like `<input>` and
`<select>`. However, no native HTML element follows the `x`
value and `xChange` event pattern.
For more on how to use two-way binding in forms, see
Angular [NgModel](guide/built-in-directives#ngModel).

74
aio/content/guide/two-way-binding.md
View File

@ -1,76 +1,76 @@
# Two-way binding `[(...)]` # Enlace bidireccional `[(...)]`
Two-way binding gives your app a way to share data between a component class and El enlace bidireccional le brinda a su aplicación una forma de compartir datos entre una clase de componente y la plantilla.
its template.
<div class="alert is-helpful"> <div class="alert is-helpful">
See the <live-example></live-example> for a working example containing the code snippets in this guide. Consulta el <live-example></live-example> para ver un ejemplo funcional que contiene los fragmentos de código de esta guía.
</div> </div>
## Basics of two-way binding ## Conceptos básicos del enlace bidireccional
Two-way binding does two things: El enlace bidireccional hace dos cosas:
1. Sets a specific element property. 1. Establece una propiedad de elemento específica.
1. Listens for an element change event. 1. Escucha un evento de cambio de elemento.
Angular offers a special _two-way data binding_ syntax for this purpose, `[()]`. Angular ofrece una sintaxis especial _enlace de datos bidireccional_ para este propósito, `[()]`.
The `[()]` syntax combines the brackets La sintaxis `[()]` combina los corchetes
of property binding, `[]`, with the parentheses of event binding, `()`. de enlace de propiedad, `[]`, con el paréntesis de vinculación de eventos, `()`.
<div class="callout is-important"> <div class="callout is-important">
<header> <header>
[( )] = banana in a box [( )] = banana en una caja
</header> </header>
Visualize a *banana in a box* to remember that the parentheses go _inside_ the brackets. Visualiza una *banana en una caja* para recordar que los paréntesis van _dentro_ de los corchetes.
</div> </div>
The `[()]` syntax is easy to demonstrate when the element has a settable La sintaxis `[()]` es fácil de demostrar cuando el elemento tiene un valor configurable
property called `x` and a corresponding event named `xChange`. propiedad llamada `x` y un evento correspondiente llamado `xChange`.
Here's a `SizerComponent` that fits this pattern. Aquí hay un `SizerComponent` que se ajusta a este patrón.
It has a `size` value property and a companion `sizeChange` event: Tiene una propiedad de valor `size` y un evento acompañante `sizeChange`:
<code-example path="two-way-binding/src/app/sizer/sizer.component.ts" header="src/app/sizer.component.ts"></code-example> <code-example path="two-way-binding/src/app/sizer/sizer.component.ts" header="src/app/sizer.component.ts"></code-example>
<code-example path="two-way-binding/src/app/sizer/sizer.component.html" header="src/app/sizer.component.html"></code-example> <code-example path="two-way-binding/src/app/sizer/sizer.component.html" header="src/app/sizer.component.html"></code-example>
The initial `size` is an input value from a property binding. El `size` inicial es un valor de entrada de un enlace de propiedad.
Clicking the buttons increases or decreases the `size`, within Al hacer clic en los botones, aumenta o disminuye el `size`, dentro de
min/max value constraints, restricciones de valor mínimo/máximo,
and then raises, or emits, the `sizeChange` event with the adjusted size. y luego genera, o emite, el evento `sizeChange` con el tamaño ajustado.
Here's an example in which the `AppComponent.fontSizePx` is two-way bound to the `SizerComponent`: Aquí hay un ejemplo en el que `AppComponent.fontSizePx` está enlazado en dos direcciones al `SizerComponent`:
<code-example path="two-way-binding/src/app/app.component.html" header="src/app/app.component.html (two-way-1)" region="two-way-1"></code-example> <code-example path="two-way-binding/src/app/app.component.html" header="src/app/app.component.html (two-way-1)" region="two-way-1"></code-example>
The `AppComponent.fontSizePx` establishes the initial `SizerComponent.size` value. El `AppComponent.fontSizePx` establece el valor inicial de `SizerComponent.size`.
<code-example path="two-way-binding/src/app/app.component.ts" header="src/app/app.component.ts" region="font-size"></code-example> <code-example path="two-way-binding/src/app/app.component.ts" header="src/app/app.component.ts" region="font-size"></code-example>
Clicking the buttons updates the `AppComponent.fontSizePx` via the two-way binding. Al hacer clic en los botones, se actualiza `AppComponent.fontSizePx` a través del enlace bidireccional.
The revised `AppComponent.fontSizePx` value flows through to the _style_ binding, El valor revisado de `AppComponent.fontSizePx` fluye a través del enlace _style_,
making the displayed text bigger or smaller. haciendo que el texto mostrado sea más grande o más pequeño.
The two-way binding syntax is really just syntactic sugar for a _property_ binding and an _event_ binding. La sintaxis de enlace bidireccional es en realidad sólo azúcar sintáctica para un enlace _property_ y un enlace _event_.
Angular desugars the `SizerComponent` binding into this: Angular quita el azúcar de el enlace `SizerComponent` en esto:
<code-example path="two-way-binding/src/app/app.component.html" header="src/app/app.component.html (two-way-2)" region="two-way-2"></code-example> <code-example path="two-way-binding/src/app/app.component.html" header="src/app/app.component.html (two-way-2)" region="two-way-2"></code-example>
The `$event` variable contains the payload of the `SizerComponent.sizeChange` event. La variable `$event` contiene la carga útil del evento `SizerComponent.sizeChange`.
Angular assigns the `$event` value to the `AppComponent.fontSizePx` when the user clicks the buttons. Angular asigna el valor `$event` al ʻAppComponent.fontSizePx` cuando el usuario hace clic en los botones.
## Two-way binding in forms ## Enlace bidireccional en formularios
The two-way binding syntax is a great convenience compared to La sintaxis de enlace bidireccional es una gran comodidad en comparación con
separate property and event bindings. It would be convenient to propiedades independientes y enlaces de eventos. Seria conveniente
use two-way binding with HTML form elements like `<input>` and utilizar enlace bidireccional con elementos de formulario HTML como `<input>` y
`<select>`. However, no native HTML element follows the `x` `<select>`. Sin embargo, ningún elemento HTML nativo sigue a el valor `x`
value and `xChange` event pattern. y el patrón de evento `xChange`.
For more on how to use two-way binding in forms, see Para obtener más información sobre cómo utilizar la vinculación bidireccional en formularios, consulte
Angular [NgModel](guide/built-in-directives#ngModel). Angular [NgModel](guide/built-in-directives#ngModel).