驴C贸mo usar Expresiones en Enlazado de Eventos (Event Binding) de Angular?

驴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贸n_de _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 Binding_es (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:

Podr铆a interesarte