Plantillas y vinculación de datos

Las plantillas le permiten mostrar contenido dinámico en Angular. En esta lección, explorará cómo funcionan las plantillas y la vinculación de datos.

¿Qué es una plantilla?

Una plantilla es HTML que Angular utiliza para representar la vista de un componente. Combina HTML con sintaxis específica de Angular para mostrar datos.

Interpolación

La interpolación le permite insertar valores del componente en el HTML. Use dobles llaves para mostrar datos:

{{ data }}

{{ username }}

Vinculación de propiedades

La vinculación de propiedades le permite establecer dinámicamente las propiedades de los elementos HTML:

[src] = "imageUrl"

<img [src]="user.profilePicture">

Vinculación de eventos

La vinculación de eventos permite que la aplicación responda a las acciones del usuario:

(click)="onClick()"

<button (click)="showAlert()">Click me</button>

Vinculación bidireccional

La vinculación bidireccional mantiene sincronizados la interfaz de usuario y los datos. Use [(ngModel)]:

<input [(ngModel)]="user.name">

Directivas estructurales

Las directivas estructurales modifican la disposición del DOM. Algunos ejemplos son *ngIf y *ngFor.

<div *ngIf="isVisible">Visible Content</div>

Usar ngFor

*ngFor recorre los datos y muestra los elementos repetidamente:

<li *ngFor="let item of items">{{ item }}</li>

Resumen

¡Ha aprendido a usar plantillas y vinculación de datos para crear vistas dinámicas de Angular!