Angular: Entendiendo la Directiva ngModel

Ú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:

<input type="text"> <p> {{ name }} </p>

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

import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { name = 'Monica'; }

En tu navegador deberías ver algo como esto: 

blogPostPic

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:  

[(ngModel)]="nombre de la propiedad que queramos vincular"

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:

<input type="text" [(ngModel)]="name"> <p> {{ name }} </p>

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:

Uncaught Error: Template parse errors: Can't bind to 'ngModel' since it isn't a known property of 'input'. ("<input type="text" [ERROR ->][(ngModel)]="name">

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í:

import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { AppComponent } from './app.component'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, FormsModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }

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. ðŸ§™â€â™‚️

gif ngModel

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 😊.  Si te queda alguna duda, ¡nos vemos en los comentarios!

Si quieres ayudar a hacer este blog sostenible, puedes invitarme a un café digital ツ
¡Gracias!¡Gracias!

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:

angular the complete guide - curso Max S.

  Max Schwarzmüller

curso angular fernando herrera

   Fernando Herrera

Si necesitas apoyo en forma de libro, puede que éstos te sirvan de ayuda:

libro 1 angular
libro 2 angular

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

Guía de iniciación al data binding en Angular
¿Qué es el databinding?El databinding es la forma que tiene Angular para permitirnos mostrar contenido dinámico en lugar de estático (en inglés, hardcoded). Podríamos[...]
Días del 353 al 386
Objetivos versus realidad Y nuevamente, llegó otro día clave. Llegó…y pasó. El pasado 4 de marzo este Reto Computer Geek[...]
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[...]
Si crees que este post puede serle útil a alguien, por favor, ¡compártelo!:

2 comentarios en «Angular: Entendiendo la Directiva ngModel»

Deja un comentario

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Como toda web legal que se precie, utilizamos cookies para asegurar que damos la mejor experiencia al usuario en nuestro sitio web. Si continúas utilizando este sitio asumiremos que estás de acuerdo. más información

Los ajustes de cookies de esta web están configurados para "permitir cookies" y así ofrecerte la mejor experiencia de navegación posible. Si sigues utilizando esta web sin cambiar tus ajustes de cookies o haces clic en "Aceptar" estarás dando tu consentimiento a esto.

Cerrar