La interpolación de texto le permite incorporar dinámicas string valores en sus plantillas HTML. Con la interpolación, puede cambiar dinámicamente lo que aparece en la vista de una aplicación, como mostrar un saludo personalizado que incluye el nombre del usuario.

Vea el ejemplo en vivo de toda la sintaxis y los fragmentos de código en esta guía.

Visualización de valores con interpolación

La interpolación se refiere a incrustar expresiones en texto marcado. De forma predeterminada, la interpolación utiliza las llaves dobles y como delimitadores.

Para ilustrar cómo funciona la interpolación, considere un componente angular que contiene un currentCustomer variable:

currentCustomer ='Maria';

Puede utilizar la interpolación para mostrar el valor de esta variable en la plantilla de componente correspondiente:

<h3>Current customer:  currentCustomer h3>

Angular reemplaza currentCustomer con el string valor de la propiedad del componente correspondiente. En este caso, el valor es Maria.

En el siguiente ejemplo, Angular evalúa la title y itemImageUrl properties para mostrar el texto del título y una imagen.

<p>titlep><div><imgsrc="itemImageUrl">div>

Expresiones de plantilla

Una plantilla expresión produce un valor y aparece entre llaves dobles, . Angular resuelve la expresión y la asigna a una propiedad de un destino de enlace. El objetivo puede ser un elemento HTML, un componente o una directiva.

Resolución de expresiones con interpolación

De manera más general, el texto entre llaves es una expresión de plantilla que Angular evalúa primero y luego convierte en un string. La siguiente interpolación ilustra el punto agregando dos números:

<p>The sum of 1 + 1 is 1 + 1.p>

Las expresiones también pueden invocar métodos del componente de host como getVal() en el siguiente ejemplo:

<p>The sum of 1 + 1 is not 1 + 1 + getVal().p>

Con la interpolación, Angular realiza las siguientes tareas:

  1. Evalúa todas las expresiones entre llaves dobles.
  2. Convierte los resultados de la expresión en cadenas.
  3. Vincula los resultados a cualquier cadena literal adyacente.
  4. Asigna el compuesto a un elemento o propiedad directiva.

Puede configurar el delimitador de interpolación con la opción de interpolación en el @Component() metadatos.

Sintaxis

Las expresiones de plantilla son similares a JavaScript. Muchas expresiones de JavaScript son expresiones de plantilla legales, con las siguientes excepciones.

No puede usar expresiones de JavaScript que tengan o promuevan efectos secundarios, incluidos:

  • Asignaciones (=, +=, -=, ...)
  • Operadores como new, typeof, o instanceof
  • Encadenando expresiones con ; o ,
  • Los operadores de incremento y decremento ++ y --
  • Algunos de los operadores de ES2015 +

Otras diferencias notables de la sintaxis de JavaScript incluyen:

  • No hay soporte para los operadores bit a bit como | y &
  • Nuevos operadores de expresión de plantilla, como |, ?. y !

Contexto de expresión

Las expresiones interpoladas tienen un contexto, una parte particular de la aplicación a la que pertenece la expresión. Normalmente, este contexto es la instancia del componente.

En el siguiente fragmento, la expresión recommended y la expresion itemImageUrl2 referirse a las propiedades del AppComponent.

<h4>recommendedh4><img[src]="itemImageUrl2">

Una expresión también puede referirse a propiedades del plantillas contexto, como una variable de entrada de plantilla o una variable de referencia de plantilla.

El siguiente ejemplo utiliza una variable de entrada de plantilla de customer.

<ul><li*ngFor="let customer of customers">customer.nameli>ul>

El siguiente ejemplo presenta una variable de referencia de plantilla, #customerInput.

<label>Type something:
  <input#customerInput>customerInput.value
label>

Las expresiones de plantilla no pueden hacer referencia a nada en el espacio de nombres global, excepto undefined. No pueden referirse a window o document. Además, no pueden llamar console.log() o Math.max() y están restringidos a hacer referencia a miembros del contexto de expresión.

Prevención de colisiones de nombres

El contexto en el que se evalúa una expresión es la unión de las variables de la plantilla, el objeto de contexto de la directiva, si tiene uno, y los miembros del componente. Si hace referencia a un nombre que pertenece a más de uno de estos espacios de nombres, Angular aplica la siguiente lógica para determinar el contexto:

  1. El nombre de la variable de plantilla.
  2. Un nombre en el contexto de la directiva.
  3. Los nombres de los miembros del componente.

Para evitar que las variables sigan a las variables en otro contexto, mantenga los nombres de las variables como únicos. En el siguiente ejemplo, el AppComponent plantilla saluda al customer, Padma.

Un ngFor luego enumera cada uno customer en el customers array.

@Component(
  template:`
    
      
      
      
    
        
        
  •  customer.value 
    • 
      

    
  `)classAppComponent
  customers =[value:'Ebony',value:'Chiho'];
  customer ='Padma';

los customer dentro de ngFor está en el contexto de un y así se refiere a la customer en el customers array, en este caso Ebony y Chiho. Esta lista no incluye a Padma porque customer fuera del ngFor está en un contexto diferente. En cambio, customer en el

no incluye Ebony o Chiho porque el contexto de este customer es la clase y el valor de la clase para customer es Padma.

Mejores prácticas de expresión

Cuando utilice expresiones de plantilla, siga estas prácticas recomendadas:

  • Usa expresiones cortas

    Utilice nombres de propiedad o llamadas a métodos siempre que sea posible. Mantenga la aplicación y la lógica empresarial en el componente, donde es más fácil de desarrollar y probar.

  • Ejecución rápida

    Angular ejecuta expresiones de plantilla después de cada ciclo de detección de cambios. Muchas actividades asincrónicas desencadenan ciclos de detección de cambios, como resoluciones de promesa, resultados HTTP, eventos de temporizador, key presiona y mueve el mouse.

    Las expresiones deben terminar rápidamente para mantener la experiencia del usuario lo más eficiente posible, especialmente en dispositivos más lentos. Considere la posibilidad de almacenar en caché los valores cuando su cálculo requiera mayores recursos.

  • Sin efectos secundarios visibles

    De acuerdo con el modelo de flujo de datos unidireccional de Angular, una expresión de plantilla no debería cambiar ningún estado de aplicación que no sea el valor de la propiedad de destino. La lectura del valor de un componente no debería cambiar ningún otro valor mostrado. La vista debe ser estable durante una sola pasada de renderizado.

    Las expresiones idempotentes reducen los efectos secundarios

    Un idempotente expression no tiene efectos secundarios y mejora el rendimiento de detección de cambios de Angular. En términos angulares, una expresión idempotente siempre devuelve exactamente lo mismo hasta que cambie uno de sus valores dependientes.

    Los valores dependientes no deben cambiar durante un solo turno del bucle de eventos. Si una expresión idempotente devuelve un string o un número, devuelve el mismo string o número si lo llama dos veces consecutivas. Si la expresión devuelve un objeto, incluido un array, devuelve el mismo objeto referencia si lo llama dos veces consecutivas.

    Hay una excepción a este comportamiento que se aplica a *ngFor. *ngFor tiene trackBy funcionalidad que puede lidiar con los valores cambiantes en los objetos al iterar sobre ellos. Ver * ngFor con trackBy para detalles.