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.
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
- Entender el concepto de enlace de datos.
- Identificar los tipos de enlace de datos.
- 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