martes, 13 de diciembre de 2016

Angular 2. Entrega 7. Data Binding con ngModel

con el "Data Binding", hacemos que la vinculación sea bidireccional (tanto javascript con html)

1. ngModel

 Para ello utilizamos con la nomenclatura "banana" [(ngModel)]

Veamos el nuevo fichero app.component.html

<h2>Títol:</h2>
<h1> {{title}} </h1>
<img [src]="imgUrl" />

<input type="text [(ngModel)]="myName">
mi nombre es {{myName}}

<button (click) = "setMyName('John Travolta')" > Hola John </button>

Si ahora miramos el navegador, vemos que a medidas que modificamos el contenido de la caja de texto, se actualiza también un poco mas abajo.

No hay comentarios :

Publicar un comentario