El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia

HOME

El enlace de datos bidireccional (two-way data binding) es una característica poderosa en Angular que permite sincronizar automáticamente los datos entre el modelo y la vista. Esto significa que cualquier cambio en el modelo se refleja en la vista y viceversa, sin necesidad de escribir código adicional para actualizar manualmente cada uno.

Conceptos Clave

Modelo: Representa los datos de la aplicación.
Vista: Representa la interfaz de usuario que se muestra al usuario.
Enlace de Datos Bidireccional: Sincroniza automáticamente los datos entre el modelo y la vista.

¿Cómo Funciona?

El enlace de datos bidireccional en Angular se logra utilizando la directiva ngModel. Esta directiva se utiliza en elementos de formulario como <input>, <select>, y <textarea> para enlazar el valor del elemento con una propiedad del componente.

Sintaxis

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

[(ngModel)]: La combinación de corchetes [] y paréntesis () indica el enlace de datos bidireccional.
propertyName: Es la propiedad del componente que se enlaza con el valor del elemento de formulario.

Ejemplo Práctico

Vamos a crear un ejemplo simple para ilustrar cómo funciona el enlace de datos bidireccional.

Paso 1: Configuración del Módulo

Primero, asegúrate de que el módulo de formularios esté importado en tu aplicación Angular.

// 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 a los imports
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Paso 2: Crear el Componente

Crea un componente que utilizará el enlace de datos bidireccional.

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Enlace de Datos Bidireccional';
  userName: string = ''; // Propiedad del modelo
}

Paso 3: Crear la Plantilla

En la plantilla del componente, utiliza la directiva ngModel para enlazar el valor del input con la propiedad userName.

<!-- app.component.html -->
<div>
  <h1>{{ title }}</h1>
  <label for="name">Nombre:</label>
  <input id="name" [(ngModel)]="userName" placeholder="Introduce tu nombre">
  <p>Hola, {{ userName }}!</p>
</div>

Explicación del Código

Modelo: La propiedad userName en el componente.
Vista: El elemento <input> y el párrafo <p>.
Enlace de Datos Bidireccional: La directiva [(ngModel)] enlaza el valor del input con la propiedad userName. Cualquier cambio en el input actualizará userName, y cualquier cambio en userName actualizará el input.

Ejercicio Práctico

Ejercicio 1: Crear un Formulario de Registro

Crea un formulario de registro simple que incluya campos para el nombre de usuario, correo electrónico y contraseña. Utiliza el enlace de datos bidireccional para enlazar estos campos con las propiedades del componente.

Paso 1: Crear el Componente

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

@Component({
  selector: 'app-register',
  templateUrl: './register.component.html',
  styleUrls: ['./register.component.css']
})
export class RegisterComponent {
  userName: string = '';
  email: string = '';
  password: string = '';
}

Paso 2: Crear la Plantilla

<!-- register.component.html -->
<div>
  <h2>Formulario de Registro</h2>
  <form>
    <label for="username">Nombre de Usuario:</label>
    <input id="username" [(ngModel)]="userName" name="username" placeholder="Introduce tu nombre de usuario">
    
    <label for="email">Correo Electrónico:</label>
    <input id="email" [(ngModel)]="email" name="email" placeholder="Introduce tu correo electrónico">
    
    <label for="password">Contraseña:</label>
    <input id="password" [(ngModel)]="password" name="password" type="password" placeholder="Introduce tu contraseña">
    
    <button type="submit">Registrarse</button>
  </form>
  
  <h3>Datos del Formulario</h3>
  <p>Nombre de Usuario: {{ userName }}</p>
  <p>Correo Electrónico: {{ email }}</p>
  <p>Contraseña: {{ password }}</p>
</div>

Solución del Ejercicio

Modelo: Las propiedades userName, email, y password en el componente.
Vista: Los elementos <input> y los párrafos <p>.
Enlace de Datos Bidireccional: La directiva [(ngModel)] enlaza los valores de los inputs con las propiedades del componente.

Resumen

En esta sección, hemos aprendido sobre el enlace de datos bidireccional en Angular y cómo se puede utilizar para sincronizar automáticamente los datos entre el modelo y la vista. Hemos visto un ejemplo práctico y un ejercicio para reforzar los conceptos aprendidos. El enlace de datos bidireccional es una herramienta poderosa que simplifica la gestión de datos en aplicaciones Angular, permitiendo una interacción más fluida y dinámica entre el usuario y la aplicación.

Enlace de Datos Bidireccional

Conceptos Clave

¿Cómo Funciona?

Sintaxis

Ejemplo Práctico

Paso 1: Configuración del Módulo

Paso 2: Crear el Componente

Paso 3: Crear la Plantilla

Explicación del Código

Ejercicio Práctico

Ejercicio 1: Crear un Formulario de Registro

Paso 1: Crear el Componente

Paso 2: Crear la Plantilla

Solución del Ejercicio

Resumen

Curso de Angular

Módulo 1: Introducción a Angular

Módulo 2: Componentes de Angular

Módulo 3: Enlace de Datos y Directivas

Módulo 4: Servicios e Inyección de Dependencias

Módulo 5: Enrutamiento y Navegación

Módulo 6: Formularios en Angular

Módulo 7: Cliente HTTP y Observables

Módulo 8: Gestión de Estado

Módulo 9: Pruebas en Angular

Módulo 10: Conceptos Avanzados de Angular

Módulo 11: Despliegue y Mejores Prácticas