En este artículo vamos a ofrecer un poco más de información sobre cosas que puedes hacer cuando estás trabajando con eventos en componentes de Angular. Son informaciones que quizás conozcas, pues las hemos abordado a través de diversas prácticas en lo que llevamos de Manual de Angular., aunque queremos llegar un poco más lejos que antes y ofrecer datos adicionales que te ayuden a usar el framework con mayor soltura.

La sintaxis para declarar un código a ejecutar como respuesta a un evento ya fue tratada en la introducción de este manual, en el artículo sintaxis para las vistas de componentes. No obstante, recordemos lo visto a través del siguiente código.

<button (click)="procesarClic()">Haz clic!</button>

El evento en cuestión se coloca entre paréntesis y luego hay que asignarle una sentencia a ejecutar como respuesta a ese evento.

Template statements

La sentencia a ejecutar como respuesta a un evento se conoce con el nombre de "statement" en la documentación de Angular. Un statement es la declaración del comportamiento que debe realizarse al dispararse un evento.

Es habitual que un statement produzca la ejecución de un método, como en el BUTTON anterior. Eso permite que mantengamos el código de la lógica del programa en el TypeScript, lo que en principio es más lógico, pero también podríamos contener directamente la sentencia en el propio template.

<div (click)="cliente.nombre = 'DesarrolloWeb.com'">Marcar Cliente</div>

En cualquier caso, un statement es simplemente la declaración de un código, en el que se usa una sintaxis similar a Javascript (o realmente similar a TypeScript). El statement se declara entre comillas, como se puede ver en el código anterior.

Los statements están pensados para modificar el estado

Así como las expresiones nunca debían modificar el estado de la aplicación, estando prohibidas sentencias como la asignación, los statements hacen el camino contrario. Dicho de otro modo, los statements están pensados para alterar las propiedades del componente, produciendo un método de comunicación desde las vistas (template) hacia su lógica.

Por este motivo, es habitual que en un statement se usen operadores de asignación, para modificar las propiedades de un componente. Incluso pueden encadenarse varias sentencias si se desea, usando el ";" para separarlas.

Sin embargo, hay algunas cosas que no están permitidas en las sentencias usadas para ejecutar un evento, como por ejemplo.

• El operador new
• Operadores de incremento y decremento (++ y --)
• Asignaciones con operaciones en un mismo paso (+= y similares)
• Pipes

El contexto de los statements

De modo modo que en las expresiones, los statements tienen disponible el contexto del componente, pudiendo acceder a las propiedades como si fueran variables, o a sus métodos.

Esto ya lo conocemos porque lo hemos usado varias veces, aunque en el caso concreto de los statements hay algunas cosas interesantes que cabe destacar.

Objeto $event

Este objeto es interesante porque nos ofrece información sobre el evento que se acaba de producir.

<button (click)="procesarEvento($event)">Transmito el objeto evento</button

>

En el anterior ejemplo, al invocar al método procesarEvento() se le está enviando $event, que contiene información sobre el evento click que se realizó.

Variables locales generadas en estructuras de template

En los templates de repetición se genera un contexto adicional, al que también se puede acceder por medio de los statements. Si recordamos el código de un *ngFor https://www.desarrolloweb.com/articulos/directiva-ngfor-angular2.html podremos saber a lo que nos referimos.

<article 
  *ngFor="let contactoItem of contactos" 
  (click)="seleccionaContacto(contactoItem)"
>
  {{ contactoItem }}
</article>

Como puedes ver, en la repetición producida por *ngFor, se genera un nuevo contexto con la variable "contactoItem", que contiene el elemento actual de la repetición. Esa variable está disponible en el statement y la podemos enviar al método seleccionaContacto() para su utilización. En el método recibimos esa variable como un parámetro.

seleccionaContacto(contacto) {
    console.log('Se ha hecho clic sobre el contacto', contacto);
}

Otro estilo de variable generada en un template es la referencia a un elemento. Por ejemplo en este código tenemos un párrafo en el que hemos definido una referencia "#parrafoTest.

<p #parrafoTest (click)="procesaClic(parrafoTest)">Test</p>

Esa referencia la podemos usar para enviarla a un método. Tal referencia no es más que el elemento en cuestión, el propio elemento del DOM. Podríamos usar ese elemento para ejecutar cualquier código con él.

procesaClic(p) {
  p.style.color = 'red';
}

En el pasado método recibimos el párrafo y le asignamos un color rojo.

Consejos a la hora de usar statements

Un par de consejos adicionales para producir sentencias en aplicaciones fácilmente mantenibles son los siguientes.

• Es preferible definir el statement mediante un método del componente, de modo que la funcionalidad y la lógica del componente se quede en el código TypeScript.
• Si optas por colocar el código a ejecutar en el statement (no usar un método del componente) debería limitarse a una simple asignación.

Conclusión

La declaración de eventos es algo básico en Angular, pero no la habíamos tratado hasta ahora con todo el detalle que merecía. Esperamos que, aunque ya estuvieses trabajando con tus propios eventos en componentes, este artículo te haya enseñado cosas nuevas.

En la sección dedicada a binding del Manual de Angular hemos conocido todas las cosas básicas que podemos hacer con el framework, aunque todavía no hemos abordado la interacción entre componentes. Para ello en los próximos artículos nos dedicaremos a conocer @Input y @Output.