Angular: Entendiendo la Directiva ngModel

Angular es un framework que nos permite, entre otras cosas, añadir contenido dinámico a nuestros archivos HTML. Una de las formas en las que podemos conseguir esto es utilizando la directiva ngModel.

Para este ejemplo vamos a trabajar directamente en nuestro AppComponent.

1. Borramos todo el contenido del archivo app.component.html y añadimos un sencillo input y un párrafo, al que le pasamos una propiedad llamada name por string interpolation.  Nuestro código queda de la siguiente manera:

2. Nos creamos la propiedad name en el archivo app.component.ts y le damos el valor que queramos, quedando nuestro código así:

En tu navegador deberías ver algo como esto: 

Pero lo que queremos conseguir es que, al escribir algo en el input, nuestro nombre cambie automáticamente por lo que sea que estemos escribiendo. Podemos hacer esto con una herramienta proporcionada por Angular llamada Directive. 

Existen varias directivas en Angular, pero la que nosotros vamos a usar se llama ngModel, cuya sintaxis es:  

Si te cuesta recordar qué va primero, si los corchetes o los paréntesis, recurre a la técnica de Banana in a box, donde los paréntesis serían los plátanos y los corchetes, las cajas cuadradas en las que vienen. Te parecerá absurdo, pero a mí me sacó de dudas al principio. 

Lo que esta directiva hace es guardar el valor que tenga la propiedad name y actualizar dicha propiedad si el usuario la cambia desde el input. Es lo que se conoce como ​two way data binding.

Nuestro código quedaría de la siguiente manera:

Si guardamos e intentamos ver el resultado en el navegador, verás una pantalla en blanco. Si abres las dev tools verás que te devuelven un error:

Esto ocurre por la manera en la que está construido Angular. Así, Angular está dividido por grandes bloques de código ( = módulos) cuyo contenido no es visible por defecto por Angular, sino que debemos "avisarle" de que queremos hacer uso de cierto módulo. 

¿Y por qué usamos los módulos? En realidad, lo que normalmente queremos usar es alguna de las diferentes funcionalidades que contiene un módulo. En nuestro caso, queremos usar la funcionalidad ngModel, pero ésta se encuentra en un módulo llamado @angular/forms, así que debemos importar dicho módulo. 

3. Lo declaramos en el archivo app.module.ts, así como en el array imports.

El código nos quedaría así:

Ahora, Angular está al tanto de que queremos usar una funcionalidad (ngModel) que se encuentra dentro de un paquete (FormsModule), que se encuentra dentro de un módulo (@angular/forms).   Aquí un esquemita para entendernos mejor:

ngModel (directive)

que está en el módulo  

FormsModule

que está en la carpeta

@angular/forms

 Guardamos y voilà! Un poquito de ngModel magic.