# 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:**

```html
<h1>{{ title }}</h1>
```

**Componente:**

```typescript
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:**

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

**Componente:**

```typescript
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:**

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

**Componente:**

```typescript
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:**

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

**Componente:**

```typescript
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:**

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

**Componente:**

```typescript
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:**

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

**Componente:**

```typescript
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:**

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

**Componente:**

```typescript
export class AppComponent {
  isSpecial = true;
}
```