Variable de referencia de plantilla en AngularJS

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:

Publicación traducida automáticamente

Artículo escrito por daya1331 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *