{"id":3554,"date":"2018-01-20T00:05:29","date_gmt":"2018-01-20T00:05:29","guid":{"rendered":"http:\/\/pensemosweb.com.mx\/index.php\/2018\/01\/20\/como-usar-expresiones-enlazado-eventos-event-binding-angular\/"},"modified":"2024-03-08T09:49:43","modified_gmt":"2024-03-08T15:49:43","slug":"como-usar-expresiones-enlazado-eventos-event-binding-angular","status":"publish","type":"post","link":"https:\/\/pensemosweb.com\/en\/como-usar-expresiones-enlazado-eventos-event-binding-angular\/","title":{"rendered":"\u00bfC\u00f3mo usar Expresiones en Enlazado de Eventos (Event Binding) de Angular?"},"content":{"rendered":"<p>En contraparte con las <a href=\"https:\/\/pensemosweb.com\/en\/como-usar-expresiones-interpolacion-property-binding\/\">expresiones de plantillas<\/a>que se usan en las interpolaciones y Property Binding, una <em>Expresi\u00f3n<\/em>of <em>Enlazado de eventos (Event Binding)<\/em>tiene un efecto colateral, este efecto sin embargo, es deseado, es el objetivo de un evento, modificar el estado de la aplicaci\u00f3n a trav\u00e9s de las acciones del usuario.<\/p>\n<p>Por la explicaci\u00f3n anterior, se les llama tambi\u00e9n <strong>expresiones de estado<\/strong>, En el siguiente ejemplo podemos ver la invocaci\u00f3n a un m\u00e9todo, la sintaxis para <em>Event Binding<\/em>is <code>(evento)=\"expresi\u00f3n\"<\/code>:<\/p>\n<pre><code>&lt;button (click)=\"cambiarNombre()\"&gt;Voltear nombre&lt;\/button&gt;\n<\/code><\/pre>\n<p>La sintaxis para las expresiones en Enlazado de eventos como las <a href=\"https:\/\/pensemosweb.com\/en\/como-usar-expresiones-interpolacion-property-binding\/\">expresiones de plantillas<\/a>es parecida a las expresiones de Javascript normales, pero tiene ciertas limitaciones. <strong>No est\u00e1 permitido<\/strong>:<\/p>\n<ul>\n<li>The operator <code>new<\/code><\/li>\n<li>Los operadores <code>++<\/code>and <code>--<\/code><\/li>\n<li>Los operadores de asignacion (<code>+=<\/code>,<code>-=<\/code>, <code>*=<\/code>, etc), OJO: el operador <code>=<\/code>SI est\u00e1 permitido.<\/li>\n<li>Los operadores a nivel de bits <code>|<\/code>and <code>&amp;<\/code><\/li>\n<li>Los operadores de expresiones de plantillas: &nbsp;Operador de Tuberia <code>|<\/code>Operador de Guardia contra valores null o indefinidos, muy util en acceso a datos, <code>?.<\/code>Operador para vereficar referencia NO Nulla, <code>!<\/code>&nbsp;<\/li>\n<\/ul>\n<p>A diferencia de las expresiones de plantillas que se utilizan en interpolaci\u00f3n y Property Binding, las expresiones de estado aceptan:<\/p>\n<ul>\n<li>El operador de asignacion <code>=<\/code><\/li>\n<li>Expresiones consecutivas como <code>operacion = operacion + 1;resultado = operacion * 2<\/code><\/li>\n<\/ul>\n<p>Aqu\u00ed esta un ejemplo en acci\u00f3n, revisa el archivo <strong>src\/app\/app.component.ts<\/strong>, puedes dar click en los botones azules <strong>both<\/strong>either <strong>preview<\/strong>para ver el c\u00f3digo en acci\u00f3n.<\/p>\n<p><iframe src=\"https:\/\/stackblitz.com\/github\/jaimeCervantes\/angular-event-binding?ctl=1&amp;embed=1&amp;file=src\/app\/app.component.ts&amp;view=editor&amp;hideNavigation=1#full\"><\/iframe><\/p>\n<h2 id=\"-de-d-nde-se-obtienen-los-valores-de-las-expresiones-de-enlazado-de-eventos\">\u00bfDe d\u00f3nde se obtienen los valores de las expresiones de enlazado de eventos?<\/h2>\n<p>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 <code>name<\/code>and <code>resultado<\/code>en el ejemplo anterior.<\/p>\n<p>Y al igual que las expresiones de plantilla, se pueden usar las propiedades o <strong>variables de plantillas<\/strong>en el contexto de la plantilla misma.<\/p>\n<h3 id=\"variables-de-input-y-de-referencia\">Variables de input y de referencia<\/h3>\n<pre><code>&lt;p *ngfor=&quot;let persona of gente&quot;&gt;\n &lt;input #nombre [value]=&quot;persona.nombre&quot; (input)=&quot;persona.nombre = $event.target.value&quot;\/&gt;\n {{persona.nombre}}\n &lt;button (click)=&quot;eliminar(nombre.value, $event)&quot;&gt;Eliminar&lt;\/button&gt;\n&lt;\/p&gt;\n<\/code><\/pre>\n<p>Aqu\u00ed se utiliza la variable de input <code>person<\/code>que es un objeto y se accede a su propiedad <code>name<\/code>en la Expresi\u00f3n de Estado <code>(input)=\"persona.nombre = $event.target.value\"<\/code><\/p>\n<p>Tambi\u00e9n tenemos la variable de referencia <code>#nombre<\/code>la cual se utiliza en la expresi\u00f3n de estado <code>(click)=\"eliminar(nombre.value, $event)\"<\/code>.<\/p>\n<p>En ambos casos vemos la propiedad de plantilla <code>$event<\/code>, la cual contiene la referencia al evento y elemento relacionado. Se accedi\u00f3 al valor de los input a trav\u00e9s de <code>$event.target.value<\/code>.<\/p>\n<p>Tambi\u00e9n mandamos todo el objeto <code>$event<\/code>en la expresi\u00f3n de estado para eliminar a una persona <code>(click)=\"eliminar(nombre.value, $event)\"<\/code>, y el m\u00e9todo eliminar de la clase del componente imprime el tipo de evento en un alerta.<\/p>\n<p>Ejemplo en acci\u00f3n:<\/p>\n<p><iframe src=\"https:\/\/stackblitz.com\/github\/jaimeCervantes\/angular-event-binding-variables?ctl=1&amp;embed=1&amp;file=src\/app\/app.component.ts&amp;view=editor&amp;hideNavigation=1#full\"><\/iframe><\/p>","protected":false},"excerpt":{"rendered":"<p>        Una Expresi\u00f3n 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\u00f3n a trav\u00e9s de las acciones del usuario.<\/p>","protected":false},"author":2,"featured_media":3752,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"categories":[23],"tags":[40],"class_list":["post-3554","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angular","tag-angular"],"_links":{"self":[{"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/posts\/3554","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/comments?post=3554"}],"version-history":[{"count":1,"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/posts\/3554\/revisions"}],"predecessor-version":[{"id":3626,"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/posts\/3554\/revisions\/3626"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/media\/3752"}],"wp:attachment":[{"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/media?parent=3554"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/categories?post=3554"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/tags?post=3554"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}