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.