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-button expand="full" (click)="syncTasks()">Sincronizar Tareas</ion-button>
</ion-content>

Conceptos Básicos

En Angular, las plantillas HTML definen la estructura de la interfaz de usuario y se enlazan a los datos y métodos del componente utilizando la directiva ngModel para el enlace de datos bidireccional.

Ejercicio

Diseña la página de tareas agregando un campo de entrada para una nueva tarea, un botón para agregar la tarea y una lista de tareas con opciones para editar y eliminar cada tarea.