Usando ngModel

En este punto vamos a aprender el uso de ngModel para capturar nuevas tareas.

Paso #1

Para saber cuándo un usuario crea una nueva tarea, primero debemos tener una variable que guarde lo que escribiste en el campo de texto, para esto, abriremos el archivo app.component.ts y crearemos una variable llamada nuevaTarea. En ésta guardaremos el texto de la tarea.

Paso #2

Ahora, para conectar el campo de texto con la variable tarea utilizaremos la directiva de Angular ngModel. Las directivas, son atributos que Angular permite para agregar super poderes a las etiquetas HTML.

Agregar [(ngModel)]="nuevaTarea" dentro de la etiqueta input hará que lo que escribamos en el campo de texto sea automáticamente asignado a la variable nuevaTarea

<input 
      [(ngModel)]="nuevaTarea"
      id="new-todo" 
      class="new-todo" 
      type="text" 
      autofocus 
      placeholder="Nueva tarea" />

Paso #3

No siempre vamos a querer que nuestro texto esté escrito directamente en el HTML, por lo general debemos guardar esos textos en variables para poder cambiar los mensajes de manera más dinámica a través de código.

Una de las funcionalidades más geniales de Angular se llama String Interpolation. Está te permite enlazar tus variables al HTML.

Para comprobar esto, vamos a mostrar el valor actual de la variable nuevaTarea dentro del HTML. Así que ahora vamos a mostrar al lado del input la tarea con {{nuevaTarea}}

<section class="todoapp">
  <header class="header">
    <h1>tareas</h1>
    <input 
      [(ngModel)]="nuevaTarea"
      id="new-todo" 
      class="new-todo" 
      type="text" 
      autofocus 
      placeholder="Nueva tarea" />
      {{ nuevaTarea }}
  </header>
</section>

Esta forma: {{nuevaTarea}}es la manera en que Angular puede mostrar las variables declaradas en el controlador al HTML.

El resultado: