Data binding en Angular

Intermedio
Angular
Angular
Actualizado: 27/08/2024

¡Desbloquea el curso completo!

IA
Ejercicios
Certificado
Entrar

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.

¿Te está gustando esta lección?

Inicia sesión para no perder tu progreso y accede a miles de tutoriales, ejercicios prácticos y nuestro asistente de IA.

Progreso guardado
Asistente IA
Ejercicios
Iniciar sesión gratis

Más de 25.000 desarrolladores ya confían en CertiDevs

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 { }

Aprendizajes de esta lección

  1. Entender el concepto de enlace de datos.
  2. Identificar los tipos de enlace de datos.
  3. Aprender a utilizar los diferentes enlaces de datos.

Completa Angular y certifícate

Únete a nuestra plataforma y accede a miles de tutoriales, ejercicios prácticos, proyectos reales y nuestro asistente de IA personalizado para acelerar tu aprendizaje.

Asistente IA

Resuelve dudas al instante

Ejercicios

Practica con proyectos reales

Certificados

Valida tus conocimientos

Más de 25.000 desarrolladores ya se han certificado con CertiDevs

⭐⭐⭐⭐⭐
4.9/5 valoración