Entendiendo One-Way y Two-Way Data Binding en Angular

Hoy estuve ayudando a un compañero nuevo en Angular con las diferencias al enlazar datos (data binding), ya que el framework ofrece dos formas de mover información hacia el DOM: one-way y two-way data binding. Ambos mecanismos nos ayudan a construir aplicaciones dinámicas.

El enlace de datos conecta la información de nuestro componente con el DOM, ya sea de forma unidireccional (del componente a la vista o de la vista al componente) o bidireccional, a través de distintas opciones:

Interpolación

Usamos la interpolación escribiendo {{myproperty}} directamente en el DOM:

<p>{{myproperty}}</p>

Property binding

Para enlazar propiedades hacia elementos del DOM o componentes, usamos corchetes [] alrededor de la propiedad (como [hidden]):

<p [hidden]="myproperty"></p>
<app-username [name]="myproperty"></app-username>

Event binding

Angular captura eventos usando paréntesis, como (click) para elementos del DOM o (userSelected) cuando un componente dispara un evento:

<button (click)="close()">Close window</button>
<app-logout (logout)="hideDashboard()"><app-/logout>

Two-way binding

El two-way data binding en Angular permite una comunicación bidireccional mediante la directiva ngModel. Esta directiva forma parte de FormsModule (@angular/forms) y debe ser importada en el archivo app.module.ts:

import { FormsModule } from "@angular/forms";
 @NgModule({ 
   imports: [BrowserModule, FormsModule], 
   declarations: [ AppComponent], 
   bootstrap: [AppComponent] 
}) 
export class AppModule { }

Al utilizar la directiva [(ngModel)], combinamos los corchetes del property binding con los paréntesis del event binding. De esta manera, ngModel conecta nuestra propiedad con los cambios del template.

En mi ejemplo vinculo la propiedad name con los cambios del input, pero también puede utilizarse en elementos como select, checkbox u otros componentes del DOM:

<input [(ngModel)]="name" />
{{name}}

Puedes ver las demos aquí: https://stackblitz.com/edit/angular-ivy-9eepqg

Foto por Surface en Unsplash

Foto por Roman Romashov en Unsplash