Creando tareas

Como habrás notado, String Interpolation es bastante fácil. Ahora vamos a crear una función que nos permita guardar las tareas.

Paso #1

En app.component.ts vamos a crear una nueva variable llamada listaTareas en donde guardaremos la lista de tareas.

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  nuevaTarea = '';
  listaTareas = [];

}

¿Notaste que la variable listaTareas se crea diferente?

listaTareas = [];

Esto representa una lista o Array dentro de Angular y nos sirve para guardar más de un valor, se puede guardar muchos valores en esta misma variable. Para insertar un nuevo valor solo debes usar el siguiente método:

listaTareas.push('nueva tarea')

El método push agregará un nuevo valor dentro del la variable listaTareas.

Por ahora en este paso solo vamos a crear la variable, así que debes tener como este resultado:

Paso #2

En este paso vamos a crear una función llamada crearTarea. El propósito de esta función es guardar el texto de la tarea en una lista de tareas.

Esta función será ejecutada cuando el usuario oprima la tecla ENTER dentro del input.

Una función en programación es simplemente una manera de definir una serie de acciones que queremos que se lleven a cabo en cierto momento.

Por ejemplo, si estuviéramos creando una calculadora, lo más seguro es que tendríamos funciones como: sumar, restar, dividir, etc.

Aquí nuestra genial función será:

crearTarea() {
  this.listaTareas.push(this.nuevaTarea);
  console.log(this.listaTareas);
}

Notarás que lo que hacemos es recoger el valor actual de la variable nuevaTarea y lo insertamos dentro de listaTareas, el uso de this es para hacer referencia a las variables del controlador. Finalmente usamos console.log para imprimir el valor actual de listaTareas en la consola del navegador.

Paso #3

Ya tenemos la función creada pero ahora necesitamos que esta se ejecute cuando el usuario oprima la tecla ENTER dentro del input.

Gracias a lo increíble que es Angular podemos ejecutar funciones desde el HTML, basadas en un evento.

Vamos a ir la plantilla y agregar lo siguiente:

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

Como ves le agregamos:

(keyup.enter)="crearTarea()"

Esto cumple con la función de detectar cuando el usuario oprime la tecla ENTER dentro del input y ejecuta la función crearTarea.

El resultado:

Paso #4

Excelente, pero notas que cuando agregamos una nueva tarea, el campo de texto debería borrarse para dar oportunidad de escribir una nueva tarea.

Esto lo vamos a solucionar haciendo que una vez que inserte la nueva tarea en lista deje el valor de nuevaTarea en un texto limpio, así:

crearTarea() {
    this.listaTareas.push(this.nuevaTarea); 
    console.log(this.listaTareas);
    this.nuevaTarea = '';
}