Ejemplo de variables de plantilla angular

Las variables de plantilla le ayudan a utilizar datos de una parte de una plantilla en otra parte de la plantilla. Con las variables de plantilla, puede realizar tareas como responder a la entrada del usuario o ajustar con precisión los formularios de su aplicación.

Una variable de plantilla puede hacer referencia a lo siguiente:

• un elemento DOM dentro de una plantilla
• una directiva
• un elemento
• TemplateRef
• a componente web

Vea el ejemplo en vivo para ver un ejemplo funcional que contiene los fragmentos de código en esta guía.

Sintaxis

En la plantilla, usa el símbolo de almohadilla, #, para declarar una variable de plantilla. La siguiente variable de plantilla, #phone, declara un phone variable en una elemento.

<input#phoneplaceholder="phone number"/>

Puede hacer referencia a una variable de plantilla en cualquier parte de la plantilla del componente. Aquí un más abajo, la plantilla se refiere a la phone variable.

<input#phoneplaceholder="phone number"/><button(click)="callPhone(phone.value)">Callbutton>

Cómo Angular asigna valores a las variables de la plantilla

Angular asigna a una variable de plantilla un valor basado en dónde declaras la variable:

• Si declara la variable en un componente, la variable se refiere a la instancia del componente.
• Si declara la variable en una etiqueta HTML estándar, la variable se refiere al elemento.
• Si declara la variable en un elemento, la variable se refiere a un TemplateRef instancia, que representa la plantilla. Para obtener más información sobre , consulte Cómo usa Angular el asterisco, *, sintaxis en directivas estructurales.
• Si la variable especifica un nombre en el lado derecho, como #var="ngModel", la variable se refiere a la directiva o componente del elemento con una coincidencia exportAs nombre.

Utilizando NgForm con variables de plantilla

En la mayoría de los casos, Angular establece el valor de la variable de plantilla en el elemento en el que ocurre. En el ejemplo anterior, phone se refiere al número de teléfono . El controlador de clic del botón pasa el valor al componente callPhone() método.

los NgForm La directiva demuestra obtener una referencia a un valor diferente por referencia a una directiva exportAs nombre. En el siguiente ejemplo, la variable de plantilla, itemForm, aparece tres veces separado por HTML.

<form#itemForm="ngForm"(ngSubmit)="onSubmit(itemForm)"><labelfor="name">Name <inputclass="form-control"name="name"ngModelrequired/>label><buttontype="submit">Submitbutton>form><div[hidden]="!itemForm.form.valid"><p> submitMessage p>div>

Sin el ngForm attribute valor, el valor de referencia de itemForm sería el HTMLFormElement,

. Sin embargo, existe una diferencia entre un Component y un Directive en que Angular hace referencia a un Component sin especificar el attribute valor, y un Directive no cambia la referencia implícita o el elemento.

Con NgForm, itemForm es una referencia a la directiva NgForm con la capacidad de rastrear el valor y la validez de cada control en el formulario.

A diferencia del nativo

elemento, el NgForm la directiva tiene un form propiedad. los NgFormform La propiedad le permite deshabilitar el botón enviar si el itemForm.form.valid no es válido.

Alcance de la variable de plantilla

Puede hacer referencia a una variable de plantilla en cualquier lugar dentro de su plantilla circundante. Directivas estructurales, como *ngIf y *ngFor, o actuar como un límite de plantilla. No puede acceder a las variables de plantilla fuera de estos límites.

Defina una variable solo una vez en la plantilla para que el valor de tiempo de ejecución siga siendo predecible.

Accediendo en una plantilla anidada

Una plantilla interna puede acceder a las variables de plantilla que define la plantilla externa.

En el siguiente ejemplo, cambiando el texto en el cambia el valor en el porque Angular actualiza inmediatamente los cambios a través de la variable de plantilla, ref1.

<input#ref1type="text"[(ngModel)]="firstExample"/><span*ngIf="true">Value:  ref1.value span>

En este caso, hay un implícito alrededor de y la definición de la variable está fuera de ella. El acceso a una variable de plantilla desde la plantilla principal funciona porque la plantilla secundaria hereda el contexto de la plantilla principal.

Reescribir el código anterior en una forma más detallada muestra explícitamente la .

<input#ref1type="text"[(ngModel)]="firstExample"/><ng-template[ngIf]="true"><span>Value:  ref1.value span>ng-template>

Sin embargo, acceder a una variable de plantilla desde fuera de la plantilla principal no funciona.

<input*ngIf="true"#ref2type="text"[(ngModel)]="secondExample"/><span>Value:  ref2?.value span>

La forma detallada muestra que ref2 está fuera de la plantilla principal.

  
  


Value:  ref2?.value 

Considere el siguiente ejemplo que usa *ngFor.

  

 ref.value 

Aquí, ref.value no funciona. La directiva estructural, *ngFor crea una instancia de la plantilla dos veces porque *ngFor itera sobre los dos elementos en el array. Es imposible definir lo que ref.value referencia significa.

Con directivas estructurales, como *ngFor o *ngIf, no hay forma de que Angular sepa si alguna vez se crea una instancia de una plantilla.

Como resultado, Angular no puede acceder al valor y devuelve un error.

Accediendo a una variable de plantilla dentro

Cuando declaras la variable en un , la variable se refiere a un TemplateRef instancia, que representa la plantilla.

<ng-template#ref3>ng-template><button(click)="log(ref3)">Log type of #refbutton>

En este ejemplo, al hacer clic en el botón se llama al log() función, que genera el valor de #ref3 a la consola. Porque el #ref la variable está en una , el valor es TemplateRef.

A continuación se muestra la salida ampliada de la consola del navegador del TemplateRef() función con el nombre de TemplateRef.

▼ ƒ TemplateRef()
name: "TemplateRef"
__proto__: Function

Variable de entrada de plantilla

A variable de entrada de plantilla es una variable a la que puede hacer referencia dentro de una única instancia de la plantilla. Declara una variable de entrada de plantilla usando el let palabra clave como en let hero.

Hay varias variables de este tipo en este ejemplo: hero, i, y odd.

El alcance de la variable está limitado a una sola instancia de la plantilla repetida. Puede volver a utilizar el mismo nombre de variable en la definición de otras directivas estructurales.

Por el contrario, declaras una variable de plantilla prefijando el nombre de la variable con #, como en #var. Una variable de plantilla se refiere a su elemento, componente o directiva adjunta.

Las variables de entrada de plantilla y los nombres de las variables de plantilla tienen sus propios espacios de nombres. La variable de entrada de la plantilla hero en let hero es distinto de la variable de plantilla hero en #hero.