Angular 2. Formularios. Entrega 4: Templates (3). Binding bidireccional. NgModel

Vamos a ver el dindig bidireccional con la nomenclatura banana box y también con NgModel.

1. Two-way binding con banana box

La nomenclatura banana box [( )] , combina los corchetes de binding de propiedades [ ], con  los paréntesis del binding de eventos ( ).

Para ello se deberá utilizar las anotaciones @Input() de la variable del componente para que sea accedible a un componente padre, y también la aontación @Output() para exportar el evento.

Vale la pena mirar las explicaciones de Angular2 pero sobre todo mirar el live example.

No me voy a extender mas en este tema, ya que es mejor utilizar NgModel.

2. Two-way binding con NgModel

NgModel es la manera mas aconsejada del 2-binding:

<input [(ngModel)]="currentHero.firstName">

Y no hay que estar atento al evento de cambio de valores, ya que NgModel lo actualiza inmediatamente, sin tener que preocuparnos por interceptar eventos.


Pero requiere que se importe FormsModule en el módulo.

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 { }

Pero a veces puede ser interesante interceptar los eventos de cambio del modelo,por ejemplo para pasar a mayúsculas. Entonce quedaría el template anterior

<input
  [ngModel]="currentHero.firstName"
  (ngModelChange)="setUpperCaseFirstName($event)">