¿Cómo usar Expresiones en Enlazado de Eventos (Event Binding) de Angular?

En contraparte con las expresiones de plantillasque se usan en las interpolaciones y Property Binding, una Expresiónde Enlazado de eventos (Event Binding)tiene un efecto colateral, este efecto sin embargo, es deseado, es el objetivo de un evento, modificar el estado de la aplicación a través de las acciones del usuario.

Por la explicación anterior, se les llama también expresiones de estado, En el siguiente ejemplo podemos ver la invocación a un método, la sintaxis para Event Bindinges (evento)="expresión":

<button (click)="cambiarNombre()">Voltear nombre</button>

La sintaxis para las expresiones en Enlazado de eventos como las expresiones de plantillases parecida a las expresiones de Javascript normales, pero tiene ciertas limitaciones. No está permitido:

• El operador new
• Los operadores ++y --
• Los operadores de asignacion (+=,-=, *=, etc), OJO: el operador =SI está permitido.
• Los operadores a nivel de bits |y &
• Los operadores de expresiones de plantillas:  Operador de Tuberia |Operador de Guardia contra valores null o indefinidos, muy util en acceso a datos, ?.Operador para vereficar referencia NO Nulla, ! 

A diferencia de las expresiones de plantillas que se utilizan en interpolación y Property Binding, las expresiones de estado aceptan:

• El operador de asignacion =
• Expresiones consecutivas como operacion = operacion + 1;resultado = operacion * 2

Aquí esta un ejemplo en acción, revisa el archivo src/app/app.component.ts, puedes dar click en los botones azules botho previewpara ver el código en acción.

¿De dónde se obtienen los valores de las expresiones de enlazado de eventos?

Al igual que las expresiones de plantillas, las expresiones de estado normalmente obtienen sus valores de los miembros de la clase del componente. Por ejemplo, las propiedades nombrey resultadoen el ejemplo anterior.

Y al igual que las expresiones de plantilla, se pueden usar las propiedades o variables de plantillasen el contexto de la plantilla misma.

Variables de input y de referencia

<p *ngFor="let persona of gente">
 <input #nombre [value]="persona.nombre" (input)="persona.nombre = $event.target.value"/>
 {{persona.nombre}}
 <button (click)="eliminar(nombre.value, $event)">Eliminar</button>
</p>

Aquí se utiliza la variable de input personaque es un objeto y se accede a su propiedad nombreen la Expresión de Estado (input)="persona.nombre = $event.target.value"

También tenemos la variable de referencia #nombrela cual se utiliza en la expresión de estado (click)="eliminar(nombre.value, $event)".

En ambos casos vemos la propiedad de plantilla $event, la cual contiene la referencia al evento y elemento relacionado. Se accedió al valor de los input a través de $event.target.value.

También mandamos todo el objeto $eventen la expresión de estado para eliminar a una persona (click)="eliminar(nombre.value, $event)", y el método eliminar de la clase del componente imprime el tipo de evento en un alerta.

Ejemplo en acción: