Create Task List Page

src/components/task-list-item/task-list-item.html

@@ -1,3 +1,7 @@
-<div>
-	{{text}}
-</div>
+<ion-item>
+	<ion-label (click)="edit()">
+		<h4>{{task.title}}</h4>
+		<p>{{task.description}}</p>
+	</ion-label>
+	<ion-toggle (ionChange)="save()" [(ngModel)]="task.done"></ion-toggle>
+</ion-item>

src/components/task-list-item/task-list-item.scss

@@ -1,3 +1,5 @@
 task-list-item {
-
+	h4 {
+		margin-top: 0 !important;
+	}
 }

src/components/task-list-item/task-list-item.ts

@@ -1,15 +1,23 @@
-import { Component } from '@angular/core';
+import { Component, Input } from '@angular/core';
+import { Task } from '../../models/Task';
+import { NavController } from 'ionic-angular/navigation/nav-controller';
 
 @Component({
 	selector: 'task-list-item',
 	templateUrl: 'task-list-item.html'
 })
 export class TaskListItemComponent {
-	text: string;
+	@Input() task: Task
 
-	constructor() {
-		console.log('Hello TaskListItemComponent Component');
-		this.text = 'Hello World';
+	constructor(
+		private navCtrl: NavController,
+	) { }
+
+	async save() {
+		await this.task.save()
 	}
 
+	edit() {
+		this.navCtrl.push('task-edit', { id: this.task.id })
+	}
 }

src/pages/task-list/task-list.html

@@ -1,9 +1,20 @@
 <ion-header>
 	<ion-navbar>
-		<ion-title>TaskList</ion-title>
+		<ion-title>Task List</ion-title>
 	</ion-navbar>
 </ion-header>
 
 <ion-content padding>
-
+	<ion-list>
+		<task-list-item *ngFor="let task of tasks" [task]="task"></task-list-item>
+	</ion-list>
 </ion-content>
+
+<ion-footer>
+	<ion-toolbar>
+		<button ion-button type="button" clear navPush="task-edit">
+			<ion-icon name="ios-add-circle-outline"></ion-icon>
+			<p>New task</p>
+		</button>
+	</ion-toolbar>
+</ion-footer>

src/pages/task-list/task-list.scss

@@ -1,3 +1,24 @@
 page-task-list {
 
+	.toolbar-content {
+		text-align: center !important;
+
+		button {
+			height: auto !important;
+
+			.button-inner {
+    			flex-direction: column !important;
+			}
+
+			ion-icon {
+				font-size: 2.8em !important;
+				margin-bottom: 4px !important;
+			}
+
+			p {
+				text-transform: none !important;
+				margin: 0 !important;
+			}
+		}
+	}
 }

src/pages/task-list/task-list.ts

@@ -1,5 +1,6 @@
 import { Component } from '@angular/core';
 import { IonicPage } from 'ionic-angular';
+import { Task } from '../../models/Task';
 
 @IonicPage({
 	name: 'tasks',
@@ -9,4 +10,10 @@ import { IonicPage } from 'ionic-angular';
 	selector: 'page-task-list',
 	templateUrl: 'task-list.html',
 })
-export class TaskListPage { }
+export class TaskListPage {
+	tasks: Task[] = []
+
+	async ionViewWillEnter() {
+		this.tasks = await Task.findAll()
+	}
+}