Simplifying Custom Two-Way Data Binding in Angular

Hay tres tipos de enlaces de datos en Angular y son los siguientes:

1. Interpolación
2. Enlace de eventos
3. Vinculación de propiedad

Si viene de un fondo Angular 1.X, es posible que se pregunte dónde está el enlace de datos bidireccional. ¿Recuerdas la primera vez que viste la demostración de AngularJS 1.X y te quedós impresionado por el poder del modelo ng? Sí, como usted, también me impresionó mucho el poder del enlace de datos bidireccional en AngularJS 1. Aunque el enlace de datos bidireccional de AngularJS 1 era hermoso, venía con el bagaje del ciclo de resumen y $watch.

Para simplificar las cosas, Angular no tiene ningún enlace de datos bidireccional incorporado. No significa; No puede tener un enlace de datos bidireccional en Angular aplicación. Vamos, no podemos pensar en crear una aplicación web moderna sin tener el poder del enlace de datos bidireccional. Entonces, en esta publicación, vamos a aprender cómo trabajar con el enlace de datos bidireccional en Angular

Two-way data binding with ngModel

Angular nos proporciona una directiva ngModel para lograr un enlace de datos bidireccional. Es muy simple y directo usar la directiva ngModel como se muestra en la lista a continuación:

import {Component} from '@angular/core';

@Component({
    moduleId:module.id,
    selector:'my-app',
    template:`
  <div class="container">
     <input [(ngModel)]='name' />
      <br/>
      <h1>Hello {{name}}</h1>
  </div>
  `
})
export class AppComponent{


}

Para usar la directiva ngModel, necesitamos importar FormsModule en la aplicación. Para su referencia, a continuación enumero app.module.ts que es importar FormsModule además de otros módulos requeridos.

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule }   from '@angular/forms';

import { AppComponent }  from './app.component';

@NgModule({
    imports:      [ BrowserModule,FormsModule ],
    declarations: [ AppComponent],
    bootstrap:    [ AppComponent ]
})
export class AppModule { }

En la demostración anterior, al escribir en el elemento de entrada, el valor de la entrada se asignará a la variable name y también se mostrará de nuevo en la vista. Por lo tanto, estamos implementando el enlace de datos bidireccional utilizando ngModel como se muestra en la siguiente imagen:

Enlace de datos bidireccional sin ngModel

Para entender el funcionamiento de la directiva ngModel, veamos cómo podemos lograr el enlace de datos bidireccional sin usar la directiva ngModel. Para hacer eso, necesitamos usar

1. Enlace de propiedades para enlazar la expresión a la propiedad value del elemento de entrada. En esta demostración, estamos enlazando la expresión de la variable de nombre a la propiedad value.
2. Enlace de eventos para emitir un evento de entrada en el elemento de entrada. Sí, hay un evento de entrada que se activará cada vez que el usuario ingrese al elemento de entrada. Con el enlace de eventos, el evento de entrada se enlazaría a una expresión.

Por lo tanto, mediante el enlace de propiedades y el enlace de eventos, se puede lograr un enlace de datos bidireccional como se muestra en la lista siguiente:

import {Component} from '@angular/core';

@Component({
    moduleId:module.id,
    selector:'my-app',
    template:`
  <div class="container">
     <input [value]="name" (input)="name=$event.target.value" />
      <br/>
      <h1>Hello {{name}}</h1>
  </div>
  `
})
export class AppComponent{
   name : string = "";
}

Al igual que la demostración de la directiva ngModel en esta demostración también, al escribir en el elemento de entrada, el valor del elemento de entrada se asignará a la variable name y también se mostrará de nuevo en la vista.

Por lo tanto, estamos implementando el enlace de datos bidireccional sin usar ngModel usando el código que se muestra en la siguiente imagen:

Entendamos algunas cosas importantes aquí:

1. [value]="name" es el enlace de propiedad. Estamos vinculando la propiedad value del elemento de entrada con el nombre de variable (o expresión).
2. (input)= "expression" es un enlace de eventos. Cada vez que se active el evento de entrada, se ejecutará la expresión.
3. "name=$event.target.value" es una expresión que asigna el valor ingresado a la variable name.
4. Se puede acceder a la variable Name dentro de la clase AppComponent.

Hasta ahora hemos visto un enlace de datos bidireccional usando ngModel y sin ngModel. Podemos concluir que la directiva ngModel no es más que una combinación de enlace de propiedades y enlace de eventos. El enlace de eventos se denota con corchetes pequeños y el enlace de propiedades se denota con corchetes [], y si observa que la sintaxis de ngModel es [(ngModel)], que es como un plátano puesto en un cuadro sugiere que es una combinación de enlace de eventos y propiedades.

Custom two-way data binding

Debemos tener mucho cuidado si crear un enlace de datos bidireccional personalizado o confiar en la directiva ngModel. Realmente no tenemos que crear siempre un enlace de datos bidireccional personalizado. Sin embargo, es bueno conocer los pasos para crear un enlace de datos bidireccional personalizado. Vamos a crear un componente customcounter con el enlace de datos bidireccional habilitado. Sigamos los pasos:

Step 1

Cree un componente con dos botones y métodos para incrementar y disminuir.

@Component({
    moduleId: module.id,
    selector:'countercomponent',
    template:`
    <button (click)='increnent()'>Increment</button>
    {{count}}
    <button (click)='decrement()'>Decrement</button>
    `
})
export class  AppChildComponent {
   count : number = 0;      
   increment(){
       this.count = this.count+1; 
   }
   decrement(){
            this.count = this.count - 1; 
   }
}

Arriba hemos creado un componente muy simple para incrementar y disminuir el conteo. Ahora podemos usar este componente dentro de otro componente, sin embargo, el enlace de datos bidireccional no está habilitado en este componente.  Para habilitar eso, necesitamos usar @Input y @Output propiedades.

Step 2

Vamos a crear un getter con la propiedad @Input(). Este captador devolverá el recuento. Dado que se atribuye al decorador @Input(), el consumidor de este componente puede vincular este valor mediante el enlace de propiedades.

@Input() 
    get counter(){
        return this.count; 
    }

Step 3

Para crear un enlace de datos bidireccional, debemos crear un evento del tipo EventEmitter. Este evento se atribuye al decorador @Output() de modo que se puede emitir al componente de consumo. Estamos creando un objeto de evento en el constructor del componente.

@Output() counterChange :  EventEmitter<number>;
    constructor(){ 
        this.counterChange = new EventEmitter();        
    }

Step 4

Como último paso, las funciones de incremento y decremento deben emitir el evento counterChange. Por lo tanto, necesitamos modificar la función de incremento y decremento como se muestra en la lista a continuación:

increment() {
    this.count=this.count+1;
    this.counterChange.emit(this.count);
}

decrement() {
    this.count=this.count - 1;
    this.counterChange.emit(this.count);
}

Ambas funciones emiten el evento counterChange. Al juntar cada pieza, un componente con enlace de datos bidireccional personalizado se verá como el código que se muestra a continuación:

import {Component,Input,Output,EventEmitter} from '@angular/core';

@Component({
    moduleId: module.id,
    selector:'countercomponent',
    template:`
    <button (click)='increment()'>Increment</button>
    {{count}}
    <button (click)='decrement()'>Decrement</button>
    `
})
export class  AppChildComponent {
     count : number = 0;   

     @Output() counterChange :  EventEmitter<number>;
        constructor(){
            this.counterChange = new EventEmitter();      
        }
     
     @Input() 
        get counter(){
            return this.count; 
        }

        increment(){
            this.count = this.count+1; 
            this.counterChange.emit(this.count);
        }

        decrement(){
            this.count = this.count - 1; 
            this.counterChange.emit(this.count);
        }
    }

 

Step 5

Como cualquier componente simple, un componente con enlace de datos bidireccional se puede usar dentro de otro componente.

import {Component} from '@angular/core';

@Component({
    moduleId:module.id,
    selector:'my-app',
    template:`
  <div class="container">
     <br/>
    
     <countercomponent [(counter)]="c"></countercomponent>
     <br/>
     <h2>count = {{c}}</h2> 
     
  </div>
  `
})
export class AppComponent {
    c : number = 1;  
}

Lo principal que puede querer es observar la forma en que se establece el valor de una propiedad de contador dentro de AppComponent. Al igual que la directiva ngModel, la propiedad counter también se establece mediante la sintaxis banana in box [(counter)]

Conclusión

El enlace de datos bidireccional en Angular es compatible con el enlace de eventos y propiedades. No hay enlace de datos bidireccional incorporado. Podemos usar la directiva ngModel para usar el enlace de datos bidireccional. Además, si es necesario, se pueden crear enlaces de datos bidireccionales personalizados. El enlace de datos bidireccional personalizado es útil en los controles de formulario.

En esta publicación, aprendimos sobre ngModel y la creación de enlaces de datos bidireccionales personalizados. Espero que encuentres útil esta publicación. Gracias por leer.