Traducida event-binding.md

aio/content/guide/event-binding.en.md

@@ -0,0 +1,108 @@
+# Event binding `(event)`
+
+Event binding allows you to listen for certain events such as
+keystrokes, mouse movements, clicks, and touches.
+
+<div class="alert is-helpful">
+
+See the <live-example></live-example> for a working example containing the code snippets in this guide.
+
+</div>
+
+Angular event binding syntax consists of a **target event** name
+within parentheses on the left of an equal sign, and a quoted
+template statement on the right.
+The following event binding listens for the button's click events, calling
+the component's `onSave()` method whenever a click occurs:
+
+<div class="lightbox">
+  <img src='generated/images/guide/template-syntax/syntax-diagram.svg' alt="Syntax diagram">
+</div>
+
+## Target event
+
+As above, the target is the button's click event.
+
+<code-example path="event-binding/src/app/app.component.html" region="event-binding-1" header="src/app/app.component.html"></code-example>
+
+Alternatively, use the `on-` prefix, known as the canonical form:
+
+<code-example path="event-binding/src/app/app.component.html" region="event-binding-2" header="src/app/app.component.html"></code-example>
+
+Element events may be the more common targets, but Angular looks first to see if the name matches an event property
+of a known directive, as it does in the following example:
+
+<code-example path="event-binding/src/app/app.component.html" region="custom-directive" header="src/app/app.component.html"></code-example>
+
+If the name fails to match an element event or an output property of a known directive,
+Angular reports an “unknown directive” error.
+
+## *$event* and event handling statements
+
+In an event binding, Angular sets up an event handler for the target event.
+
+When the event is raised, the handler executes the template statement.
+The template statement typically involves a receiver, which performs an action
+in response to the event, such as storing a value from the HTML control
+into a model.
+
+The binding conveys information about the event. This information can include data values such as an event object, string, or number named `$event`.
+
+The target event determines the shape of the `$event` object.
+If the target event is a native DOM element event, then `$event` is a
+[DOM event object](https://developer.mozilla.org/en-US/docs/Web/Events),
+with properties such as `target` and `target.value`.
+
+Consider this example:
+
+<code-example path="event-binding/src/app/app.component.html" region="event-binding-3" header="src/app/app.component.html"></code-example>
+
+This code sets the `<input>` `value` property by binding to the `name` property.
+To listen for changes to the value, the code binds to the `input`
+event of the `<input>` element.
+When the user makes changes, the `input` event is raised, and the binding executes
+the statement within a context that includes the DOM event object, `$event`.
+
+To update the `name` property, the changed text is retrieved by following the path `$event.target.value`.
+
+If the event belongs to a directive&mdash;recall that components
+are directives&mdash;`$event` has whatever shape the directive produces.
+
+## Custom events with `EventEmitter`
+
+Directives typically raise custom events with an Angular [EventEmitter](api/core/EventEmitter).
+The directive creates an `EventEmitter` and exposes it as a property.
+The directive calls `EventEmitter.emit(payload)` to fire an event, passing in a message payload, which can be anything.
+Parent directives listen for the event by binding to this property and accessing the payload through the `$event` object.
+
+Consider an `ItemDetailComponent` that presents item information and responds to user actions.
+Although the `ItemDetailComponent` has a delete button, it doesn't know how to delete the hero. It can only raise an event reporting the user's delete request.
+
+Here are the pertinent excerpts from that `ItemDetailComponent`:
+
+<code-example path="event-binding/src/app/item-detail/item-detail.component.html" header="src/app/item-detail/item-detail.component.html (template)" region="line-through"></code-example>
+
+<code-example path="event-binding/src/app/item-detail/item-detail.component.ts" header="src/app/item-detail/item-detail.component.ts (deleteRequest)" region="deleteRequest"></code-example>
+
+The component defines a `deleteRequest` property that returns an `EventEmitter`.
+When the user clicks *delete*, the component invokes the `delete()` method,
+telling the `EventEmitter` to emit an `Item` object.
+
+Now imagine a hosting parent component that binds to the `deleteRequest` event
+of the `ItemDetailComponent`.
+
+<code-example path="event-binding/src/app/app.component.html" header="src/app/app.component.html (event-binding-to-component)" region="event-binding-to-component"></code-example>
+
+When the `deleteRequest` event fires, Angular calls the parent component's
+`deleteItem()` method, passing the *item-to-delete* (emitted by `ItemDetail`)
+in the `$event` variable.
+
+## Template statements have side effects
+
+Though [template expressions](guide/interpolation#template-expressions) shouldn't have [side effects](guide/property-binding#avoid-side-effects), template
+statements usually do. The `deleteItem()` method does have
+a side effect: it deletes an item.
+
+Deleting an item updates the model, and depending on your code, triggers
+other changes including queries and saving to a remote server.
+These changes propagate through the system and ultimately display in this and other views.

aio/content/guide/event-binding.md

@@ -1,108 +1,106 @@
-# Event binding `(event)`
+# Enlace de eventos `(event)`
 
-Event binding allows you to listen for certain events such as
-keystrokes, mouse movements, clicks, and touches.
+El enlace de eventos le permite escuchar ciertos eventos, como
+pulsaciones de teclas, movimientos del ratón, clics y toques.
 
 <div class="alert is-helpful">
 
-See the <live-example></live-example> for a working example containing the code snippets in this guide.
-
+Consulte el <live-example> </live-example> para ver un ejemplo funcional que contiene los fragmentos de código de esta guía.
 </div>
 
-Angular event binding syntax consists of a **target event** name
-within parentheses on the left of an equal sign, and a quoted
-template statement on the right.
-The following event binding listens for the button's click events, calling
-the component's `onSave()` method whenever a click occurs:
+La sintaxis de enlace de eventos angular consiste en un **evento de destino** nombre
+entre paréntesis a la izquierda de un signo igual y una cita
+declaración de plantilla a la derecha.
+El siguiente enlace de eventos escucha los eventos de clic del botón, llamando
+el método `onSave()` del componente cada vez que se produce un clic:
 
 <div class="lightbox">
   <img src='generated/images/guide/template-syntax/syntax-diagram.svg' alt="Syntax diagram">
 </div>
 
-## Target event
+## Evento objetivo
 
-As above, the target is the button's click event.
+Como arriba, el objetivo es el evento de clic del botón.
 
 <code-example path="event-binding/src/app/app.component.html" region="event-binding-1" header="src/app/app.component.html"></code-example>
 
-Alternatively, use the `on-` prefix, known as the canonical form:
+Alternativamente, use el prefijo `on-`, conocido como la forma canónica:
 
 <code-example path="event-binding/src/app/app.component.html" region="event-binding-2" header="src/app/app.component.html"></code-example>
 
-Element events may be the more common targets, but Angular looks first to see if the name matches an event property
-of a known directive, as it does in the following example:
+Los eventos de elementos pueden ser los objetivos más comunes, pero Angular busca primero para ver si el nombre coincide con una propiedad de evento
+de una directiva conocida, como en el siguiente ejemplo:
 
 <code-example path="event-binding/src/app/app.component.html" region="custom-directive" header="src/app/app.component.html"></code-example>
 
-If the name fails to match an element event or an output property of a known directive,
-Angular reports an “unknown directive” error.
+Si el nombre no coincide con un evento de elemento o una propiedad de salida de una directiva conocida,
+Angular informa de un error de "directiva desconocida".
 
-## *$event* and event handling statements
+## *$event* y declaraciones de manejo de eventos
 
-In an event binding, Angular sets up an event handler for the target event.
+En un enlace de eventos, Angular configura un controlador de eventos para el evento de destino.
 
-When the event is raised, the handler executes the template statement.
-The template statement typically involves a receiver, which performs an action
-in response to the event, such as storing a value from the HTML control
-into a model.
+Cuando se genera el evento, el controlador ejecuta la declaración de plantilla.
+La declaración de plantilla generalmente involucra a un receptor, que realiza una acción
+en respuesta al evento, como almacenar un valor del control HTML
+en un modelo.
 
-The binding conveys information about the event. This information can include data values such as an event object, string, or number named `$event`.
+El enlace transmite información sobre el evento. Esta información puede incluir valores de datos como un objeto de evento, una cadena o un número llamado `$event`.
 
-The target event determines the shape of the `$event` object.
-If the target event is a native DOM element event, then `$event` is a
-[DOM event object](https://developer.mozilla.org/en-US/docs/Web/Events),
-with properties such as `target` and `target.value`.
+El evento de destino determina la forma del objeto `$event`.
+Si el evento de destino es un evento de elemento DOM nativo, entonces `$event` es un
+[Objeto de evento DOM](https://developer.mozilla.org/en-US/docs/Web/Events),
+con propiedades como `target` y` target.value`.
 
-Consider this example:
+Considere este ejemplo:
 
 <code-example path="event-binding/src/app/app.component.html" region="event-binding-3" header="src/app/app.component.html"></code-example>
 
-This code sets the `<input>` `value` property by binding to the `name` property.
-To listen for changes to the value, the code binds to the `input`
-event of the `<input>` element.
-When the user makes changes, the `input` event is raised, and the binding executes
-the statement within a context that includes the DOM event object, `$event`.
-
-To update the `name` property, the changed text is retrieved by following the path `$event.target.value`.
+Este código establece la propiedad `<input>` `value` uniéndose a la propiedad `name`.
+Para escuchar cambios en el valor, el código se enlaza con el `input`
+evento del elemento `<input>`.
+Cuando el usuario realiza cambios, se genera el evento `input` y el enlace se ejecuta
+la declaración dentro de un contexto que incluye el objeto de evento DOM, `$event`.
 
-If the event belongs to a directive&mdash;recall that components
-are directives&mdash;`$event` has whatever shape the directive produces.
+Para actualizar la propiedad `name`, el texto modificado se recupera siguiendo la ruta` $event.target.value`.
 
-## Custom events with `EventEmitter`
+Si el evento pertenece a una directiva&mdash;recuerda que los componentes
+son directivas&mdash;`$event` tiene cualquier forma que produzca la directiva.
 
-Directives typically raise custom events with an Angular [EventEmitter](api/core/EventEmitter).
-The directive creates an `EventEmitter` and exposes it as a property.
-The directive calls `EventEmitter.emit(payload)` to fire an event, passing in a message payload, which can be anything.
-Parent directives listen for the event by binding to this property and accessing the payload through the `$event` object.
+## Eventos personalizados con `EventEmitter`
 
-Consider an `ItemDetailComponent` that presents item information and responds to user actions.
-Although the `ItemDetailComponent` has a delete button, it doesn't know how to delete the hero. It can only raise an event reporting the user's delete request.
+Las directivas suelen generar eventos personalizados con un Angular [EventEmitter](api/core/EventEmitter).
+La directiva crea un `EventEmitter` y lo expone como una propiedad.
+La directiva llama `EventEmitter.emit(payload)` para disparar un evento, pasando una carga útil de mensaje, que puede ser cualquier cosa.
+Las directivas principales escuchan el evento al vincularse a esta propiedad y acceder a la carga útil a través del objeto `$event`.
+Considere una`ItemDetailComponent` que presenta información sobre el artículo y responde a las acciones del usuario.
+Aunque el `ItemDetailComponent` tiene un botón de borrar, no sabe cómo borrar al héroe. Solo puede generar un evento que informe la solicitud de eliminación del usuario.
 
-Here are the pertinent excerpts from that `ItemDetailComponent`:
+Aquí están los extractos pertinentes de ese `ItemDetailComponent`:
 
 <code-example path="event-binding/src/app/item-detail/item-detail.component.html" header="src/app/item-detail/item-detail.component.html (template)" region="line-through"></code-example>
 
 <code-example path="event-binding/src/app/item-detail/item-detail.component.ts" header="src/app/item-detail/item-detail.component.ts (deleteRequest)" region="deleteRequest"></code-example>
 
-The component defines a `deleteRequest` property that returns an `EventEmitter`.
-When the user clicks *delete*, the component invokes the `delete()` method,
-telling the `EventEmitter` to emit an `Item` object.
+El componente define una propiedad `deleteRequest` que devuelve un `EventEmitter`.
+Cuando el usuario hace clic en *eliminar*, el componente invoca el método `delete()`,
+decirle al `EventEmitter` que emita un objeto `Item`.
 
-Now imagine a hosting parent component that binds to the `deleteRequest` event
-of the `ItemDetailComponent`.
+Ahora imagine un componente principal de alojamiento que se une al evento `deleteRequest`
+del `ItemDetailComponent`.
 
 <code-example path="event-binding/src/app/app.component.html" header="src/app/app.component.html (event-binding-to-component)" region="event-binding-to-component"></code-example>
 
-When the `deleteRequest` event fires, Angular calls the parent component's
-`deleteItem()` method, passing the *item-to-delete* (emitted by `ItemDetail`)
-in the `$event` variable.
+Cuando se activa el evento `deleteRequest`, Angular llama al componente principal
+Método `deleteItem()`, pasando el *elemento a borrar* (emitido por `ItemDetail`)
+en la variable `$event`.
 
-## Template statements have side effects
+## Las declaraciones de plantilla tienen efectos secundarios
 
-Though [template expressions](guide/interpolation#template-expressions) shouldn't have [side effects](guide/property-binding#avoid-side-effects), template
-statements usually do. The `deleteItem()` method does have
-a side effect: it deletes an item.
+Aunque [expresiones de plantilla](guide/interpolation#template-expressions) no debería tener [efectos secundarios](guide/property-binding#avoid-side-effects), la plantilla
+las declaraciones suelen hacer. El método `deleteItem()` tiene
+un efecto secundario: elimina un elemento.
 
-Deleting an item updates the model, and depending on your code, triggers
-other changes including queries and saving to a remote server.
-These changes propagate through the system and ultimately display in this and other views.
+Eliminar un elemento actualiza el modelo y, según su código, desencadena
+otros cambios, incluidas las consultas y el guardado en un servidor remoto.
+Estos cambios se propagan a través del sistema y finalmente se muestran en esta y otras vistas.