Enlace de datos bidireccional en Angular 2

1. Enlace de datos bidireccional en Angular
2. Implementar enlace de datos bidireccional en Angular 2

Este tutorial discutirá la implementación del enlace de datos bidireccional en Angular 2.

Enlace de datos bidireccional en Angular

El enlace de datos bidireccional es una de las características más poderosas de Angular. Permite que los datos fluyan del componente a la vista y viceversa.

Presenta información al usuario y le permite cambiar los datos subyacentes a través de la interfaz de usuario.

El enlace de datos nos ayuda a administrar el estado de nuestra aplicación al realizar un seguimiento de qué partes de la interfaz de usuario dependen de qué datos y actualizar cada vez que esos datos cambian.

La diferencia crítica entre el enlace unidireccional y el bidireccional es que con el enlace bidireccional, cualquier cambio realizado en cualquier dirección se propagará automáticamente al otro lado sin ninguna intervención de nuestra parte.

Angular 2 no emplea el enlace de datos bidireccional de forma predeterminada. Utiliza el enlace de datos unidireccional por definición, pero proporciona una sintaxis simple para el enlace de datos bidireccional si es necesario.

Para imitar el enlace bidireccional en Angular 2, necesitamos usar la directiva ngModel y el evento ngModelChange.

La directiva ngModel vincula una propiedad en la plantilla de su componente a una propiedad en su clase. El evento ngModelChange se dispara cada vez que hay un cambio en el valor de esa propiedad enlazada.

Implementar enlace de datos bidireccional en Angular 2

ngModel es una directiva de enlace de datos bidireccional en Angular 2, lo que significa que actualiza tanto la vista como el modelo cuando se realizan cambios. Podemos configurar un controlador de eventos en cada lado vinculante.

Como resultado, el valor de propiedad correspondiente se actualiza automáticamente cada vez que el usuario lo modifica en la interfaz de usuario.

ngModel se puede usar como atributo o clase en una etiqueta HTML.

Analicemos un ejemplo de enlace de datos bidireccional usando ngModel en Angular 2.

Código TypeScript:

import { Component } from '@angular/core';
@Component({
    selector: 'my-app',
    template: `
            <h3>{{ name }}</h3>
            <input [(ngModel)]="address" />
            `,
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
    name = 'Muhammad Adil';
    address = "block no 1 sector G11, Sydney";
    onKeyUp() {
        console.log(this.address);
    }
}

Haga clic aquí para ver la demostración en vivo del código anterior.