Two-way Binding

El siguiente post es continuación del resumen de Angular 2

En los posts anteriores hemos visto:

JavaScript to HMTL

HTML to JavaScript

Two-way Binding es la unión de ambos para tener una comunicación bidireccional, es posible hacerlo de dos formas:

  • Utilizando los dos Bindings:

    En este ejemplo en el mismo input se muestra la cantidad (Binding de propiedades) y se añade la cantidad (Binding de eventos):

1
<input class="number" type="text" [value]="carPart.quantity" (input)="carPart.quantity = $event.target.value">
  • Utilizando la síntasis [ () ] (Banana in the box)

Para ello en la clase del componente se importa @angular/forms:

1
2
3
4
5
6
7
8
9
10
11
...
import { FormsModule } from '@angular/forms';
@NgModule({
declarations: [ AppComponent ],
imports: [ BrowserModule , FormsModule ],
bootstrap: [ AppComponent ],
providers: [ RacingDataService ],
})
class AppModule { }
...

Y en el input se utiliza la síntasis [ () ]:

1
<input class="number" type="text" [(ngModel)]="carPart.quantity" >

De esta forma es mucho más clara y precisa.