La variable de referencia de plantilla en angular se usa para acceder a todas las propiedades de cualquier elemento dentro de DOM. También puede ser una referencia a un componente Angular o directiva o un componente web.
Variable de referencia de plantilla puede hacer referencia a lo siguiente:
- elemento DOM
- Directivas
- componente angular
- Componente web
Acercarse :
- Cree una aplicación Angular para usar.
- Cree el elemento de entrada y agregue la referencia de plantilla a este campo de entrada usando la etiqueta #.
- Vincule esta referencia de plantilla dentro del método de clic de botón «cambiar título()».
- Ahora, dentro del método changeTitle, tenemos acceso completo a este campo de entrada y aquí hemos establecido el valor del campo de entrada y las propiedades de enfoque.
Sintaxis: use la etiqueta # antes del nombre de la variable. ejemplo – #geek
<input #geek placeholder="" />
Ejemplo 1:
app.component.html
<input #geek placeholder="" /> <!-- geek refers to the input element; pass it to an event handler --> <button (click)="changeTitle(geek)">Click Me</button>
En la plantilla HTML anterior, hemos creado un elemento de entrada con la variable de referencia de plantilla «correo electrónico» y hemos creado un botón. Al hacer clic en el botón, accedemos al elemento de entrada completo y todas sus propiedades.
"#geek" is template reference variable on input field
app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
changeTitle(inputElement){
inputElement.value = "GeeksforGeeks";
inputElement.focus();
}
}
Se puede acceder a la variable de referencia de la plantilla del elemento de entrada dentro de la función changeTitle() y al hacer clic en el botón, estamos actualizando el valor del elemento de entrada y también enfocamos este campo.
Producción:
Ejemplo 2: en los formularios controlados por plantillas, en realidad estamos usando la variable de referencia de la plantilla para acceder a los datos del formulario.
app.component.html
<h1>{{email_address}}</h1>
<form #itemForm="ngForm" (ngSubmit)="onSubmit(itemForm)">
<input ngModel #email="ngModel" type="email"
placeholder="Email" name="email" />
<button type="submit">Submit</button>
</form>
Así que aquí estamos accediendo a los datos del formulario utilizando la variable de referencia de la plantilla en el elemento del formulario y en el envío del formulario estamos mostrando el correo electrónico de entrada proporcionado a través del campo del formulario.
app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
email_address = 'geek@geek.com';
onSubmit(form){
this.email_address = form.value.email;
}
}
Por lo tanto, se accede a los campos completos del formulario utilizando la variable de referencia de la plantilla «itemForm», y estamos mostrando la dirección de correo electrónico en el navegador.
Producción:
