Notas

Tipos de Data Binding

En Angular, el enlace de datos (data binding) es un mecanismo fundamental que permite sincronizar los datos entre la vista (template) y el modelo (componente) de una aplicación. Angular proporciona varios tipos de enlace de datos para manejar diferentes escenarios de sincronización de datos. A continuación, se explican los principales tipos de enlace de datos en Angular:

1. Interpolación (String Interpolation)

La interpolación es el tipo más sencillo de enlace de datos en Angular. Permite insertar valores calculados, propiedades de componentes o resultados de expresiones directamente en el template HTML. Se utiliza la sintaxis de doble llave {{ }}.

Ejemplo:

<h1>{{ title }}</h1>

Componente:

export class AppComponent {
  title = 'Hello, Angular!';
}

2. Enlace de Propiedades (Property Binding)

El enlace de propiedades permite asignar valores de las propiedades del componente a las propiedades de los elementos HTML. Se utiliza la sintaxis de corchetes [].

Ejemplo:

<img [src]="imageUrl" alt="Description">

Componente:

export class AppComponent {
  imageUrl = 'https://example.com/image.jpg';
}

3. Enlace de Eventos (Event Binding)

El enlace de eventos permite responder a eventos del usuario, como clics, entradas de teclado, etc., y ejecutar métodos en el componente. Se utiliza la sintaxis de paréntesis ().

Ejemplo:

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

Componente:

export class AppComponent {
  onClick() {
    console.log('Button clicked!');
  }
}

4. Enlace de Dos Vías (Two-Way Binding)

El enlace de dos vías permite sincronizar los datos entre la vista y el modelo en ambas direcciones. Se utiliza la sintaxis de banana-in-a-box [()]. Este tipo de enlace es comúnmente utilizado con el directiva ngModel.

Ejemplo:

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

Componente:

import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  imports: [FormsModule]
})
export class AppComponent {
  name = 'Angular';
}

5. Enlace de Atributos (Attribute Binding)

El enlace de atributos permite asignar valores a los atributos de los elementos HTML. Se utiliza la sintaxis de corchetes [] con el prefijo attr..

Ejemplo:

<div [attr.aria-label]="label"></div>

Componente:

export class AppComponent {
  label = 'Description';
}

6. Enlace de Clases (Class Binding)

El enlace de clases permite agregar o quitar clases CSS a los elementos HTML basados en expresiones booleanas. Se utiliza la sintaxis de corchetes [] con el prefijo class..

Ejemplo:

<div [class.active]="isActive"></div>

Componente:

export class AppComponent {
  isActive = true;
}

7. Enlace de Estilos (Style Binding)

El enlace de estilos permite aplicar estilos CSS a los elementos HTML basados en expresiones. Se utiliza la sintaxis de corchetes [] con el prefijo style..

Ejemplo:

<div [style.color]="isSpecial ? 'red' : 'black'"></div>

Componente:

export class AppComponent {
  isSpecial = true;
}