Última actualización: 1 noviembre, 2020
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.
🤷♀️ ¿MÁS PERDID@ QUE UN PULPO EN UN GARAJE? 🐙
Si acabas de aterrizar aquí y estos temas de Angular te suenan a chino, te recomiendo que empieces por este artículo de introducción a Angular con las claves para entenderlo.
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:
{{ name }}
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:
{{ name }}
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.

El ngModel es uno de los múltiples temas básicos que aprendí en este completo curso de Angular.
THE END!
¡Y con esto terminamos nuestro repaso a la ngModel Directive! Espero que hayas aprendido algo nuevo
Sobre la autora de este post
Soy Rocío, una abogada reconvertida en programadora. Soy una apasionada de aprender cosas nuevas y ferviente defensora de que la única manera de ser feliz es alcanzando un equilibrio entre lo que te encanta hacer y lo que te saque de pobre. Mi historia completa, aquí.
Más recursos de aprendizaje
En mi experiencia, la manera más eficaz para aprender Angular es combinando varias vías de aprendizaje. Uno de mis métodos favoritos son los vídeo-cursos y mi plataforma predilecta para eso es Udemy. He hecho varios cursos pero sólo recomiendo aquellos que verdaderamente me han sido útiles. Aquí van:
Si necesitas apoyo en forma de libro, puede que éstos te sirvan de ayuda:
La programación es un mundo que evoluciona a una velocidad de vértigo. Los autores de estos libros lo saben, por eso suelen encargarse de actualizar su contenido regularmente. Asegúrate de que así sea antes de adquirirlos
Participo en el programa de afiliados de Udemy y Amazon, lo que significa que, si compras alguno de estos cursos y/o libros, yo me llevaré una pequeña comisión y a ti no costará nada extra. Vamos, lo que se dice un win-win
Otros artículos que pueden interesarte
¡Mil gracias Luis!
Excelente, te felicito por la simplicidad con la que explicas….
¡Me alegro de que te haya servido, Manuel!
Excelente, justamente lo que necesitaba