Sintaxis de plantillas
En Angular, una plantilla es un fragmento de HTML. Usa sintaxis especial dentro de una plantilla para aprovechar muchas de las características de Angular.
CONSEJO: Consulta los Fundamentos de Angular antes de sumergirte en esta guía completa.
Cada componente de Angular tiene una plantilla que define el DOM que el componente renderiza en la página. Al usar plantillas, Angular es capaz de mantener automáticamente tu página actualizada a medida que los datos cambian.
Las plantillas generalmente se encuentran dentro de la propiedad template de un archivo *.component.ts o en el archivo *.component.html. Para aprender más, consulta la guía detallada de componentes.
¿Cómo funcionan las plantillas?
Las plantillas están basadas en la sintaxis de HTML, con características adicionales como funciones de plantilla integradas, enlace de datos, escucha de eventos, variables y más.
Angular compila las plantillas en JavaScript para construir una comprensión interna de tu aplicación. Uno de los beneficios de esto son las optimizaciones de renderización integradas que Angular aplica a tu aplicación automáticamente.
Diferencias con HTML estándar
Algunas diferencias entre las plantillas y la sintaxis HTML estándar incluyen:
- Los comentarios en el código fuente de la plantilla no se incluyen en la salida renderizada
- Los elementos de componentes y directivas pueden cerrarse automáticamente (por ejemplo,
<UserProfile />) - Los atributos con ciertos caracteres (es decir,
[],(), etc.) tienen un significado especial para Angular. Consulta la documentación de enlace y la documentación de agregar event listeners para más información. - El carácter
@tiene un significado especial para Angular para agregar comportamiento dinámico, como control de flujo, a las plantillas. Puedes incluir un carácter@literal escapándolo como un código de entidad HTML (@o@). - Angular ignora y colapsa caracteres de espacios en blanco innecesarios. Consulta espacios en blanco en plantillas para más detalles.
- Angular puede agregar nodos de comentarios a una página como marcadores de posición para contenido dinámico, pero los desarrolladores pueden ignorarlos.
Además, aunque la mayoría de la sintaxis HTML es sintaxis de plantilla válida, Angular no admite el elemento <script> en plantillas. Para más información, consulta la página de Seguridad.
¿Qué sigue?
También podrías estar interesado en lo siguiente:
| Temas | Detalles |
|---|---|
| Enlace de texto, propiedades y atributos dinámicos | Vincula datos dinámicos a texto, propiedades y atributos. |
| Agregar event listeners | Responde a eventos en tus plantillas. |
| Enlace bidireccional | Vincula un valor y propaga cambios simultáneamente. |
| Control de flujo | Muestra, oculta y repite elementos condicionalmente. |
| Pipes | Transforma datos de forma declarativa. |
| Incrustar contenido hijo con ng-content | Controla cómo los componentes renderizan contenido. |
| Crear fragmentos de plantilla con ng-template | Declara un fragmento de plantilla. |
| Agrupar elementos con ng-container | Agrupa múltiples elementos juntos o marca una ubicación para renderizar. |
| Variables en plantillas | Aprende sobre declaraciones de variables. |
| Carga diferida con @defer | Crea vistas diferibles con @defer. |
| Sintaxis de expresiones | Aprende similitudes y diferencias entre expresiones de Angular y JavaScript estándar. |
| Espacios en blanco en plantillas | Aprende cómo Angular maneja los espacios en blanco. |