Mostrando la lista de tareas

En la variable listaTareas se encuentran todas las tareas guardadas que el usuario está creando, ahora llego el punto de mostrarlas en pantalla.

Paso #1

Lo primero que vamos hacer es crear la estructura HTML para mostrar las tareas. Será así:

<section id="main" class="main">
  <ul id="todo-list" class="todo-list">
    <li>
      <label>Tarea 1</label>
    </li>
    <li>
      <label>Tarea 2</label>
    </li>
  </ul>
</section>

Lo vamos agregar a toda nuestra plantilla:

<section class="todoapp">
  <header class="header">
    <h1>tareas</h1>
    <input 
      [(ngModel)]="nuevaTarea"
      id="new-todo" 
      class="new-todo" 
      type="text" 
      autofocus 
      placeholder="Nueva tarea"
      (keyup.enter)="crearTarea()"/>
  </header>
  <section id="main" class="main">
    <ul id="todo-list" class="todo-list">
      <li>
        <label>Tarea 1</label>
      </li>
      <li>
        <label>Tarea 2</label>
      </li>
    </ul>
  </section>
</section>

El resultado debe ser:

Paso #2

Como ves en la aplicación, se muestra una lista de tareas, pero es una lista estática debemos lograr que se muestre dinámicamente según las tareas guardadas en la variable listaTareas.

Para lograr esto Angular nos provee la directiva ngFor, capaz de hacer una repetición de elementos dentro de la página. Esta repetición nos permite recorrer una estructura de array y para cada uno de sus elementos replicar una cantidad de elementos en el HTML.

En nuestro caso para mostrar todas las tareas vamos a modificar el elemento li y aplicar un ngFor.

<li *ngFor="let tarea of listaTareas">
    <label>{{ tarea }}</label>
</li>

El resultado: