Señales en plantillas
Enlace los valores de las señales directamente en las plantillas de los componentes.
Señales en plantillas es una lección gratuita de Angular Academy en CoddyKit. Esta es la lección 4 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Angular Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Angular Academy incluye 4 lecciones en total.
Signals en plantillas
Una de las mejores características de los signals es que puede leerlos directamente en las plantillas llamándolos, igual que en TypeScript. No se necesita el pipe async.
Lectura en interpolaciones
En la plantilla, llame al signal dentro de la interpolación con dobles llaves para mostrar su valor.
@Component({
selector: 'app-counter',
template: '<p>Count: {{ count() }}</p>'
})
export class CounterComponent {
count = signal(0);
}No se necesita el pipe async
Con los Observables necesitaba el pipe async para suscribirse y cancelar la suscripción. Los signals son síncronos, así que solo tiene que llamarlos. No hay nada de lo que cancelar la suscripción.
Actualizaciones automáticas de la vista
Cuando cambia un signal leído en la plantilla, Angular sabe que la plantilla depende de él y actualiza únicamente ese binding. Esta es la reactividad de grano fino en acción.
Llamar a signals en controladores de eventos
Vincule los eventos a métodos del componente que actualicen los signals. La plantilla vuelve a renderizar automáticamente los bindings afectados.
@Component({
selector: 'app-counter',
template: '<button (click)="inc()">{{ count() }}</button>'
})
export class CounterComponent {
count = signal(0);
inc() { this.count.update(v => v + 1); }
}Signals en property bindings
Puede llamar a un signal dentro de cualquier binding, incluidos los property bindings y los attribute bindings.
// disabled when count reaches 0
// template: <button [disabled]="count() === 0">Go</button>Signals con el control de flujo integrado
Las plantillas modernas usan bloques de control de flujo integrados. Puede leer un signal dentro de un bloque if llamándolo.
// template:
// @if (count() > 0) {
// <p>Positive</p>
// }Signals computed en plantillas
Los valores derivados son ideales para las plantillas. Un signal computed se recalcula únicamente cuando cambian sus fuentes y se lee de la misma forma.
import { signal, computed } from '@angular/core';
export class CartComponent {
qty = signal(2);
price = signal(10);
total = computed(() => this.qty() * this.price());
}Lectura de un computed en la vista
Lea el signal computed en la plantilla igual que cualquier otro signal.
// template: <p>Total: {{ total() }}</p>Por qué es eficiente
Como Angular realiza un seguimiento exacto de qué expresiones de la plantilla leen cada signal, puede omitir el trabajo de las partes de la vista que no dependían del signal modificado.
Error frecuente: olvidar los paréntesis
Si escribe count en lugar de count() en una plantilla, mostrará la propia función del signal, no su valor. Llame siempre al signal.
Comprobación rápida: plantillas
¿Cómo aparecen los signals en las plantillas?
Resumen: signals en plantillas
Lee los signals en las plantillas llamándolos con paréntesis, sin usar el pipe async ni tener que cancelar ninguna suscripción. Angular actualiza únicamente los bindings que dependen de un signal modificado, y los signals computed funcionan de la misma manera. Ha completado los fundamentos de Signals.
Preguntas frecuentes
¿La lección «Señales en plantillas» es gratis?
Sí — el texto completo de «Señales en plantillas» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Angular Academy, actualiza a CoddyKit PRO. El curso de Angular Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Señales en plantillas»?
Enlace los valores de las señales directamente en las plantillas de los componentes. Practicas Angular Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Angular Academy?
No se requiere experiencia previa. Angular Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 4.
¿Cuánto tiempo toma la lección «Señales en plantillas»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Angular Academy?
Sí. Cada lección de Angular Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Qué son las señales
- Creación y lectura de señales
- Actualización de señales con set y update
- Señales en plantillas