Paso 5.Diseñar la Página de Tareas

Objetivo

Diseñar la interfaz de usuario para la página de tareas.

Editar todo.page.html

Abre src/app/todo/todo.page.html y agrega el siguiente contenido:

<ion-header>
  <ion-toolbar>
    <ion-title>
      To-Do List
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content class="ion-padding">
  <ion-item>
    <ion-label position="floating">Nueva Tarea</ion-label>
    <ion-input [(ngModel)]="newTask"></ion-input>
  </ion-item>
  <ion-button expand="full" (click)="addTask()">Agregar Tarea</ion-button>

  <ion-list>
    <ion-item *ngFor="let task of tasks; let i = index">
      {{ task }}
      <ion-button fill="clear" slot="end" (click)="removeTask(i)">
        <ion-icon name="trash" slot="icon-only"></ion-icon>
      </ion-button>
    </ion-item>
  </ion-list>
</ion-content>