Es importante saber que son las expresiones de plantillas, estas se utilizan en las interpolaciones y en el Enlazado de propiedades (Property Binding).
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í angular incorpora una pequeña sintaxis, que, aunque pueda ser nueva, es de gran utilidad y en esta publicación veremos expresiones de Javascript, interpolación y property binding en las plantillas de angular.
En las plantillas de angular cualquier elemento HTML es valido, a excepción de elementos como <html>, <head>, <base>, los cuales no tiene que estar en una plantilla de angular porque las plantillas de angular se “dibujan”dentro de la etiqueta <body>.
Otra excepción de suma importancia es la etiqueta <script>, esta etiqueta no se debe usar en las plantillas por el riesgo que se corre a ataques de XSS. Afortunadamente Angular previene XSS a través de sanitización, esta técnica convierte texto potencialmente ejecutable (código no deseado) a texto totalmente seguro.
¿Qué son las expresiones de plantillas?
Las expresiones de plantillas no son más que expresiones de Javascript normales con ciertas limitaciones. Veamos dos ejemplos:
En Interpolación se utiliza la sintaxis {{expresion}}:
<h3>2 + 2 es igual a {{2 + 2}}</h3>El resultado es:
<h3>2 + 2 es igual a 4</h3>En enlazado de propiedades se utiliza la sintaxis [propiedad]="expresion":
<h2 [hidden]="oculto">Ejemplo Enlazado of propiedades</h2>
<input [hidden]="oculto" value="Este es un input oculto">En el ejemplo, debido que la propiedad ocultoes un boleano igual a true, el h2y el inputpermanecen ocultos. El mismo resultado se obtiene si usamos el comparador de igualdad:
<h2 [hidden]="oculto === true">Ejemplo Enlazado of propiedades</h2>
<input [hidden]="oculto === true" value="Este es un input oculto">Vemos que dentro de la sintaxis de doble llaves existe una operación de suma y usamos el operador de igualdad en oculto === true, es decir, podemos utilizar Expresiones de Javascripten nuestras plantillas, aunque podemos utilizar expresiones de Javascript, no todo está permitido.
Las expresiones Javascript que producen efectos colaterales no se deben utilizar y NO están permitidas:
- Las asignaciones (
=,+=,-=,*=, etc) - El operator
new - Las Expresiones consecutivas con
;either,. Ejemplo{{1+1;2+2}} - Los operadores
++and-- - Los operadores a nivel de bits
|and&
Una característica 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:
- Operador de Tuberia
| - Operador de Guardia contra valores null o indefinidos, muy util en acceso a datos,
?. - Operador para vereficar referencia NO Nulla,
!
Estos tres últimos operadores los veremos a detalle en otra publicación.
Interpolación
La interpolación nos permite obtener información en una aplicación, genera un enlacecon el origen de la información, es decir, si los datos de origen cambian, la interpolación actualiza ese cambio en la vista. En otras palabras, reacciona al cambio de datos.
Ejemplo, contenido de src/app/app.component.html:
<div>
<h2>Hola {{name}}</h2>
<h2>{{"cadena".split('').reverse().join('')}}</h2>
<h2>{{false ? 'SI' : 'NO'}}</h2>
<img src="{{logo}}">
<h3>2 + 2 es igual a {{2 + 2}}</h3>
<h2 [hidden]="oculto">Ejemplo Enlazado of propiedades</h2>
<input [hidden]="oculto" value="Este es un input oculto">
<h2 [hidden]="oculto === true">Ejemplo Enlazado of propiedades</h2>
<input [hidden]="oculto === true" value="Este es un input oculto">
<button (click)="cambiarNombre()">Voltear nombre</button>
</div>Ejemplo en acción, revisa el archivo src/app/app.component.ts:
En el ejemplo tenemos un componente llamado my-appdefinido en el archivo src/app/app.component.ts, la plantilla del componente está definida en la propiedad templateUrldel decorador @component, carga un arhivo html externo.
Podemos ver que cuando damos clic en el botón Voltear textola propiedad namees cambiada invirtiendo los caracteres, se invierte los caracteres a través del método cambiarNombre. Y la reacción a este cambio esta enlazado con la interpolación {{nombre}}.
También se puede utilizar interpolación en atributos, en el ejemplo anterior para mostrar la imagen se utilizó:
<img src="{{logo}}">Otro ejemplo:
<h3>2 + 2 es igual a {{2 + 2}}</h3>¿De dónde se obtienen los valores de las expresiones de plantilla?
Normalmente los valores estan definidos en el componente como vimos en el anterior ejemplo, nameand logoestán definidos como miembros de la clase y en el constructor se les define su valor.
Pero también se puede definir propiedades en el contexto de la plantilla llamadas variables de plantillas, existen dos tipos de estas variables:
- Variables de input
- Variables de referencia
Variables de input
<div *ngFor="let person of gente">
<h3>{{persona.nombre}}</h3>
</div>persones la variable de input usada en la directiva *ngFor
Variables de referencia
<input #varReferencia value="Hola">
{{varReferencia.value}}En este otro caso se ocupa el carácter #y luego el nombre de la variable de referencia que deseas crear. Con esto se puede utilizar la variable en interpolación como se ve en {{varReferencia.value}}.
La jerarquía o prioridad del valor final obtenido en las expresiones de plantillas es así:
- Variables en plantilla, input y de referencia.
- Directivas
- Componentes
Para ilustrar la prioridad, veamos el ejemplo, en la parte donde se utiliza la directiva *ngForpara recorrer el arreglo gente, ahí se define una variable de input person, y después se accede a la propiedad nombre de cada persona, podemos notar que debido a la jerarquía arriba listada se tomo primero en cuenta la variable de plantilla personantes que el miembro persondel componente. El miembro persones un string “soy otra persona”y nunca se imprime dentro de la lista de personas.
Cuando uses una expresión de plantilla, sigue estos consejos:
- Tu expresión debe ser rápida de ejecutar porque no va a ser la única en toda tu plantilla. Si es necesario, considera guardar los resultados de las expresiones que se van a utilizar varias veces en la plantilla y asi la expresion no se ejecuta varias veces.
- Utiliza el principio de mantener todo estúpidamente simple, no uses complejas expresiones porque genera mucho ruido en la plantilla, para expresiones más complejas utiliza la clase del componente, y aún ahí considera el principio KISS (Keep It Simple, Stupid).
- Investiga el funcionamiento de detección de cambios de angular para mantener tus expresiones lo más eficientes posibles, en una futura publicación explicaré la detección de cambios y como nos ayuda a mejorar el rendimiento de nuestro aplicación.
EN 
ES_MX
Hola,
Muy interesante tus artículos, me quedé con las ganas de esto que comentas “Estos tres últimos operadores los veremos a detalle en otra publicación.” .. no sé si desarrollaste esto pero no lo encuentro con el buscador
Gracias