Data binding en Angular

El enlace de datos o data binding es un mecanismo que permite la sincronización entre la vista (la representación visual en el navegador) y el modelo (los datos en TypeScript del componente) en una aplicación.

Esto significa que cualquier cambio en el modelo se reflejará automáticamente en la vista y viceversa.

Tipos de enlace de datos

Angular ofrece diferentes formas de implementar el enlace de datos, que se clasifican en unidireccional y bidireccional.

Unidireccional

1.- Interpolación: Utiliza llaves dobles {{ }} para mostrar el valor de una propiedad del componente directamente en el HTML.

Por ejemplo:

// app.component.ts
export class AppComponent {
  nombre: string = 'Juan';
}

<!-- app.component.html -->
<p>Mi nombre es {{ nombre }}</p>

2.- Enlace de propiedad: Utiliza corchetes [] para asignar el valor de una propiedad del componente a un atributo del DOM.

Por ejemplo:

// app.component.ts
export class AppComponent {
  deshabilitado: boolean = true;
}

<!-- app.component.html -->
<button [disabled]="deshabilitado">Click me</button>

3. Enlace de evento: Permite responder a eventos del usuario, como clics, ingresos de teclado, etc. Utiliza paréntesis () para vincular estos eventos del DOM a un método del componente.

Por ejemplo:

// app.component.ts
export class AppComponent {
  hacerClick() {
    alert('Botón clickeado');
  }
}

<!-- app.component.html -->
<button (click)="hacerClick()">Click me</button>

Bidireccional

4. Enlace bidireccional: Utiliza la combinación [()] para vincular una propiedad del componente y un evento del DOM, permitiendo una comunicación bidireccional. Para usar esto, necesitas importar FormsModule en tu módulo.

Por ejemplo:

// app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  texto: string = 'texto inicial';
}

<!-- app.component.html -->
<input [(ngModel)]="texto" />
<p>El texto es: {{ texto }}</p>

// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms'; // Importa FormsModule

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule // Añade FormsModule aquí
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }