{"id":3553,"date":"2018-01-05T16:06:41","date_gmt":"2018-01-05T16:06:41","guid":{"rendered":"http:\/\/pensemosweb.com.mx\/index.php\/2018\/01\/05\/como-usar-expresiones-interpolacion-property-binding\/"},"modified":"2024-04-06T01:42:08","modified_gmt":"2024-04-06T07:42:08","slug":"como-usar-expresiones-interpolacion-property-binding","status":"publish","type":"post","link":"https:\/\/pensemosweb.com\/en\/como-usar-expresiones-interpolacion-property-binding\/","title":{"rendered":"How to use Expressions in Angular Interpolation and Property Binding?"},"content":{"rendered":"

Es importante saber que son las expresiones de plantillas, estas se utilizan en las interpolaciones y en el Enlazado de propiedades (Property Binding).<\/p>\n\n\n\n

Cuando creas un componente, se utiliza HTML para crear su plantilla, esto es bueno, no tienes que aprender mucho de otra sintaxis para plantillas, aun as\u00ed angular incorpora una peque\u00f1a sintaxis, que, aunque pueda ser nueva, es de gran utilidad y en esta publicaci\u00f3n veremos expresiones de Javascript, interpolaci\u00f3n y property binding en las plantillas de angular.<\/p>\n\n\n\n

En las plantillas de angular cualquier elemento HTML es valido, a excepci\u00f3n de elementos como <html><\/code>, <head><\/code>, <base><\/code>, los cuales no tiene que estar en una plantilla de angular porque las plantillas de angular se “dibujan”<\/em>dentro de la etiqueta <body><\/code>.<\/p>\n\n\n\n

Otra excepci\u00f3n de suma importancia es la etiqueta <script><\/code>, esta etiqueta no se debe usar en las plantillas por el riesgo que se corre a ataques de XSS<\/a>. Afortunadamente Angular previene XSS a trav\u00e9s de sanitizaci\u00f3n, esta t\u00e9cnica convierte texto potencialmente ejecutable (c\u00f3digo no deseado) a texto totalmente seguro.<\/p>\n\n\n\n

\u00bfQu\u00e9 son las expresiones de plantillas?<\/h2>\n\n\n\n

Las expresiones de plantillas no son m\u00e1s que expresiones de Javascript normales con ciertas limitaciones. Veamos dos ejemplos:<\/p>\n\n\n\n

En Interpolaci\u00f3n se utiliza la sintaxis {{expresion}}<\/code>:<\/p>\n\n\n\n

<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
<<\/span>h3<\/span>><\/span>2 + 2 es igual a <\/span>{{<\/span>2<\/span> + <\/span>2<\/span>}}<\/<\/span>h3<\/span>><\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
El resultado es:<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
<<\/span>h3<\/span>><\/span>2 + 2 es igual a 4<\/span><\/<\/span>h3<\/span>><\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
En enlazado de propiedades se utiliza la sintaxis [propiedad]=\"expresion\"<\/code>:<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
<<\/span>h2<\/span> [hidden]="oculto">Ejemplo <\/span>Enlazado<\/span> <\/span>of<\/span> propiedades<\/h2><\/span><\/span>\n<input [hidden]="oculto" <\/span>value<\/span>=<\/span>"<\/span>Este es un input oculto<\/span>"<\/span>><\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
En el ejemplo, debido que la propiedad oculto<\/code>es un boleano igual a true<\/code>, el h2<\/code>y el input<\/code>permanecen ocultos. El mismo resultado se obtiene si usamos el comparador de igualdad:<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
<<\/span>h2<\/span> [hidden]="oculto === true">Ejemplo <\/span>Enlazado<\/span> <\/span>of<\/span> propiedades<\/h2><\/span><\/span>\n<input [hidden]="oculto === true" <\/span>value<\/span>=<\/span>"<\/span>Este es un input oculto<\/span>"<\/span>><\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
Vemos que dentro de la sintaxis de doble llaves existe una operaci\u00f3n de suma y usamos el operador de igualdad en oculto === true<\/code>, es decir, podemos utilizar Expresiones de Javascript<\/strong>en nuestras plantillas, aunque podemos utilizar expresiones de Javascript, no todo est\u00e1 permitido.<\/p>\n\n\n\n
Las expresiones Javascript que producen efectos colaterales no se deben utilizar y NO est\u00e1n permitidas:<\/p>\n\n\n\n
    \n
  • Las asignaciones (=<\/code>,+=<\/code>,-=<\/code>, *=<\/code>, etc)<\/li>\n\n\n\n
  • El operator new<\/code><\/li>\n\n\n\n
  • Las Expresiones consecutivas con ;<\/code>either ,<\/code>. Ejemplo {{1+1;2+2}}<\/code><\/li>\n\n\n\n
  • Los operadores ++<\/code>and --<\/code><\/li>\n\n\n\n
  • Los operadores a nivel de bits |<\/code>and &<\/code><\/li>\n<\/ul>\n\n\n\n
    Una caracter\u00edstica importante en las expresiones de plantillas y que es distinta de las expresiones Javascript normales es que se pueden utilizar los siguientes operadores, pero ojo, no son operadores a nivel de bits:<\/p>\n\n\n\n
      \n
    • Operador de Tuberia |<\/code><\/li>\n\n\n\n
    • Operador de Guardia contra valores null o indefinidos, muy util en acceso a datos, ?.<\/code><\/li>\n\n\n\n
    • Operador para vereficar referencia NO Nulla, !<\/code><\/li>\n<\/ul>\n\n\n\n
      Estos tres \u00faltimos operadores los veremos a detalle en otra publicaci\u00f3n.<\/p>\n\n\n\n
      Interpolaci\u00f3n<\/h2>\n\n\n\n
      La interpolaci\u00f3n nos permite obtener informaci\u00f3n en una aplicaci\u00f3n, genera un enlace<\/strong>con el origen de la informaci\u00f3n, es decir, si los datos de origen cambian, la interpolaci\u00f3n actualiza ese cambio en la vista. En otras palabras, reacciona al cambio de datos.<\/p>\n\n\n\n
      Ejemplo, contenido de src\/app\/app.component.html<\/strong>:<\/p>\n\n\n\n
      <\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
      <<\/span>div<\/span>><\/span><\/span>\n  <\/span><<\/span>h2<\/span>><\/span>Hola <\/span>{{<\/span>name<\/span>}}<\/<\/span>h2<\/span>><\/span><\/span>\n  <\/span><<\/span>h2<\/span>>{{<\/span>"<\/span>cadena<\/span>"<\/span>.split(<\/span>''<\/span>).reverse().join(<\/span>''<\/span>)}}<\/h2><\/span><\/span>\n  <h2>{{false ? <\/span>'<\/span>SI<\/span>'<\/span> <\/span>:<\/span> <\/span>'<\/span>NO<\/span>'<\/span>}}<\/<\/span>h2<\/span>><\/span><\/span>\n  <\/span><<\/span>img<\/span> <\/span>src<\/span>=<\/span>"<\/span>{{logo}}<\/span>"<\/span>><\/span><\/span>\n  <\/span><<\/span>h3<\/span>><\/span>2 + 2 es igual a <\/span>{{<\/span>2<\/span> + <\/span>2<\/span>}}<\/<\/span>h3<\/span>><\/span><\/span>\n  <\/span><<\/span>h2<\/span> [hidden]="oculto">Ejemplo <\/span>Enlazado<\/span> <\/span>of<\/span> propiedades<\/h2><\/span><\/span>\n  <input [hidden]="oculto" <\/span>value<\/span>=<\/span>"<\/span>Este es un input oculto<\/span>"<\/span>><\/span><\/span>\n  <\/span><<\/span>h2<\/span> [hidden]="oculto === true">Ejemplo <\/span>Enlazado<\/span> <\/span>of<\/span> propiedades<\/h2><\/span><\/span>\n  <input [hidden]="oculto === true" <\/span>value<\/span>=<\/span>"<\/span>Este es un input oculto<\/span>"<\/span>><\/span><\/span>\n  <\/span><<\/span>button<\/span> (click)="cambiarNombre()">Voltear nombre<\/button><\/span><\/span>\n<\/div><\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
      Ejemplo en acci\u00f3n, revisa el archivo src\/app\/app.component.ts<\/strong>:<\/p>\n\n\n\n