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

Objetivo

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

Editar tasks.page.html

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

<ion-header>
  <ion-toolbar>
    <ion-title>
      Task Manager
    </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">
      <ion-label>{{ task }}</ion-label>
      <ion-button fill="clear" slot="end" (click)="editTask(i)">
        <ion-icon name="create" slot="icon-only"></ion-icon>
      </ion-button>
      <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>