1

Dado el siguiente template de HTML:

<p>{{nombre}} {{apellidos}}, {{edad}}, {{nombreEmpresa.value}}</p>
<p>Introduce el nombre de la empresa <input type="text" #nombreEmpresa></p>
<input type="button" value="Guardar" (click)="llamaEmpresa(nombreEmpresa.value)">

La función llamaEmpresa está definida como:

llamaEmpresa(value: String) { }

Este código permite alterar el nombre de la empresa al ser introducido por teclado en el input identificado como nombreEmpresa.

Entiendo que el último (y único) botón llama, al presionar en el mismo, a la función llamaEmpresa con el valor de texto introducido por el usuario en el input anterior. Ahora bien, ¿cómo es posible que esto funcione sin conexión alguna entre dicha función y el template en HTML?

Yo esperaba que llamaEmpresa retornara un String que fuera el mismo que el parámetro introducido en su llamada. El retorno se almacena en una variable la cual será la que se use para poner el nombre de la empresa en pantalla.

Os dejo aquí el template en TS del componente en cuestión:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-empleado',
  templateUrl: './empleado.component.html',
  styleUrls: ['./empleado.component.css']
  //template: "<p>Aquí iría un empleado</p>",
  //styles: ["p{background-color: red;}"]
})
export class EmpleadoComponent implements OnInit {

  nombre = "Sergio";
  apellidos = "Durán Vega";
  edad = 22;

  llamaEmpresa(value: String) { }

  constructor() { }

  ngOnInit(): void {
  }

}

Yo imaginaba algo así:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-empleado',
  templateUrl: './empleado.component.html',
  styleUrls: ['./empleado.component.css']
  //template: "<p>Aquí iría un empleado</p>",
  //styles: ["p{background-color: red;}"]
})
export class EmpleadoComponent implements OnInit {

  nombre = "Sergio";
  apellidos = "Durán Vega";
  edad = 22;

  retorno = llamaEmpresa(value: String): String { return value; };

  constructor() { }

  ngOnInit(): void {
  }

}

Como puede verse, solo añadí la variable "retorno" que usaré a continuación para imprimir el valor del usuario por pantalla tal que:

<p>{{nombre}} {{apellidos}}, {{edad}}, {{retorno}}</p>
<p>Introduce el nombre de la empresa <input type="text" #nombreEmpresa></p>
<input type="button" value="Guardar" (click)="llamaEmpresa(nombreEmpresa.value)">

Esperaba algo así, es decir, una conexión entre el template HTML y el template TS. Sin embargo, Angular lo hace sin esa conexión. ¿Cómo? Se me ocurre que pueda estar creando dinámicamente la variable "retorno" al leerla como parámetro de la función llamaEmpresa, lo que hace que momentáneamente exista dicha variable en el template TS y, en consecuencia, pueda se usada por el template HTML. Es solo una teoría, por eso pregunto cómo funciona esto. Gracias.

2 respuestas 2

2

En la plantilla se usa esto: nombreEmpresa.value, esa es una variable de plantilla que se ha declarado en el input como #nombreEmpresa. Eso crea un enlace y permite visualizar en tiempo real lo que se escribe en el input.

En el ejemplo, efectivamente la función llamaEmpresa no hace nada. Se puede dejar así y seguirá funcionando igual:

  <p>{{nombre}} {{apellidos}}, {{edad}}, {{nombreEmpresa.value}}</p>
  <p>Introduce el nombre de la empresa <input type="text" #nombreEmpresa></p>

Para entender mejor las variables de plantilla puedes referirte a la documentación Template variables

1
  • Pero como usted lo ha hecho no se actualiza el valor de la empresa a vista del usuario. Creo que la función del botón es únicamente la de "refrescar" los valores de las variables presentes en el programa. No sé exactamente cómo actúa un botón para poder hacer ese reinicio, pero así es cómo actúa y por eso está ahí. ¿Me equivoco? Commented el 23 jul. 2022 a las 22:06
1

Si

<input  type="text" #empresa> {{empresa}}

mostrara textualmente [object HTMLInputElement] porque muestra que se declaro una variable en un HTML tag Si

<input  type="text" #empresa> {{empresa.value}}

no mostrara nada porque nada le dice a angular que detecte un cambio si disparas cualquier evento aunque no tenga relacion con empresa si podra detectar el cambio Requiere por ejemplo:

<input #phone placeholder="phone number" />
{{phone.value}}
<!-- phone refers to the input element;
  Angular detecta al evento click y entonces dispara 
  la deteccion del cambio
 -->
<button (click)="callPhone('hola')"></button>

//ts

callPhone(hola:string){}

Se ve muy claramente en:

<p>
 <label for="firstName">First Name</label>
 <input (keyup)="0" type="text" #firstName id="firstName">
</p>
 
<p>
 <label for="lastName">Last Name</label>
 <input (keyup)="0" type="text" #lastName id="lastName">
</p>
 
<b>Welcome {{firstName.value}} {{lastName.value}} </b>

Al usar (keyup)="0" on the input element fuerza a angular a detectar el cambio referencia teoria deteccion cambio

La detección de cambios se ejecuta solo en respuesta a eventos asincrónicos, como la llegada de respuestas HTTP, la generación de eventos, y otros Con

retorno = llamaEmpresa(value: String): String { return value; };

le das el valor a retorno de value y angular lo que detecta es el cambio en la variable retorno

la interpolación utiliza llaves dobles como delimitadores conteniendo a una expresion de plantilla (templete expression) . Angular primero la evalua y luego la convierte en string produciendo un valor El texto entre llaves puede ser el nombre de una propiedad del componente o en tu caso es una variable de plantilla la cual la evalua y la muestra cuando detecta un evento La detección de cambios tiene dos partes principales: seguimiento de cambios y representación Hay dos bloques de construcción principales de detección de cambios en Angular: una vista de componentes;los enlaces asociados Cuando Angular crea los nodos DOM para representar el contenido de la plantilla en la pantalla, necesita un lugar para almacenar las referencias a esos nodos DOM. Para ello, internamente existe una estructura de datos conocida como View Esta puede almacenar la referencia a la instancia del componente y los valores anteriores de las expresiones vinculantes Para cada propiedad que pueda cambiar el compilador crea un enlace que define a la propiedad para actualizar y la exprecion usada para obtener un nuevo valores Asi la deteccion de cambio se realiza para cada vista El enlace es la parte central de la detección de cambios en Angular Una vez que se crean los enlaces, Angular ya no funciona con la plantilla. El mecanismo de detección de cambios ejecuta instrucciones que procesan enlaces. El trabajo de estas instrucciones es verificar si el valor de una expresión con una propiedad de componente ha cambiado y realizar actualizaciones de DOM si es necesario.

La deteccion de cambio en angular se puede activar como resultado de cualquier evento asincronico en el navegador si por ejemplo desencadenamos la deteccion de cambio con setInterval terminariamos con un bucle infinito de deteccion de cambio Para profundizar sobré el tema

teoria deteccion cambio

  1. Introduccion deteccion de cambio Introduccion deteccion de cambio
  2. uso de setInterval para detectar el cambio setInterval deteccion cambio

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.