/
list.page.html
46 lines (37 loc) · 1.35 KB
/
list.page.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<ion-header>
<ion-toolbar color="primary">
<ion-title>
Todos
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content [fullscreen]="true">
<ion-card *ngFor="let todo of todos$ | async; trackBy: todoTrackBy" class="ion-margin">
<ion-card-header>
<div>
<ion-icon *ngIf="todo.priority === 'high'" color="danger" name="ellipse" size="small"></ion-icon>
<ion-icon *ngIf="todo.priority === 'low'" color="success" name="ellipse" size="small"></ion-icon>
<ion-icon *ngIf="todo.priority === 'normal'" color="warning" name="ellipse" size="small"></ion-icon>
<ion-label> {{ todo.description }}</ion-label>
</div>
</ion-card-header>
<ion-card-content>
<ion-label>Due {{todo.dueDate | date:'yyyy-MM-dd'}}</ion-label>
</ion-card-content>
<ion-row>
<ion-item [routerLink]="['./edit', todo.id]" routerDirection="forward">
<ion-icon name="pencil-outline"></ion-icon>
<p>Update</p>
</ion-item>
<ion-item (click)="deleteTodo(todo.id)">
<ion-icon name="trash-outline"></ion-icon>
<p>Delete</p>
</ion-item>
</ion-row>
</ion-card>
<ion-fab horizontal="end" slot="fixed" vertical="bottom">
<ion-fab-button routerDirection="forward" routerLink="./edit">
<ion-icon name="add"></ion-icon>
</ion-fab-button>
</ion-fab>
</ion-content>