Templates y Data Binding (one-way, two-way, property, event binding)

1. Templates en Angular

Los templates en Angular son las vistas HTML de tus componentes. Puedes usar bindings para conectar los datos de tu componente TypeScript con la vista HTML y viceversa.

2. Data Binding en Angular

A. One-way Data Binding

a) Property Binding

Sintaxis: [property]="expression"

export class AppComponent {
   titulo = 'Hola Angular';
}

<h1 [innerText]="titulo"></h1>
  <!-- O bien -->
<img [src]="imagenUrl">

b) Event Binding

Permite al template informar eventos al componente (de la vista a la clase).

Sintaxis: (event)="handler()"

Ejemplo:

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

B. Two-way Data Binding

Permite la sincronización automática de datos entre la vista y el componente (cambios en uno afectan al otro).

Sintaxis: [(ngModel)]="property"

export class AppComponent {
nombre = '';
}

<input [(ngModel)]="nombre" placeholder="Escribe tu nombre">
<p>Hola, {{ nombre }}</p>

C. Interpolation (Interpolación)

No es un binding per se, pero es la forma más directa de mostrar datos:

Sintaxis: { { expre }}