diff --git a/aio/content/guide/event-binding.en.md b/aio/content/guide/event-binding.en.md new file mode 100644 index 000000000000..40af4f6055ab --- /dev/null +++ b/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. + +
+ +See the for a working example containing the code snippets in this guide. + +
+ +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: + +
+ Syntax diagram +
+ +## Target event + +As above, the target is the button's click event. + + + +Alternatively, use the `on-` prefix, known as the canonical form: + + + +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: + + + +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: + + + +This code sets the `` `value` property by binding to the `name` property. +To listen for changes to the value, the code binds to the `input` +event of the `` 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—recall that components +are directives—`$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`: + + + + + +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`. + + + +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. diff --git a/aio/content/guide/event-binding.md b/aio/content/guide/event-binding.md index 40af4f6055ab..e57d5fed1179 100644 --- a/aio/content/guide/event-binding.md +++ b/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.
-See the for a working example containing the code snippets in this guide. - +Consulte el para ver un ejemplo funcional que contiene los fragmentos de código de esta guía.
-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:
Syntax diagram
-## 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. -Alternatively, use the `on-` prefix, known as the canonical form: +Alternativamente, use el prefijo `on-`, conocido como la forma canónica: -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: -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: -This code sets the `` `value` property by binding to the `name` property. -To listen for changes to the value, the code binds to the `input` -event of the `` 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 `` `value` uniéndose a la propiedad `name`. +Para escuchar cambios en el valor, el código se enlaza con el `input` +evento del elemento ``. +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—recall that components -are directives—`$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—recuerda que los componentes +son directivas—`$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`: -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`. -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.