Delete item, change colors and add new item

src/app/pages/home/home.page.html

@@ -1,5 +1,5 @@
 <ion-header>
-  <ion-toolbar color="primary">
+  <ion-toolbar color="tertiary">
     <ion-title>Home</ion-title>
     <ion-buttons slot="end">
       <ion-button [routerLink]="['/new-item']">

src/app/pages/new-item/new-item.page.html

@@ -1,5 +1,5 @@
 <ion-header>
-  <ion-toolbar color="primary">
+  <ion-toolbar color="tertiary">
     <ion-title>New Item</ion-title>
     <ion-buttons slot="start">
       <ion-back-button></ion-back-button>
@@ -10,11 +10,11 @@
 <ion-content padding>
   <form [formGroup]="new_item_form" (submit)="createItem(new_item_form.value)">
     <ion-item>
-      <ion-label color="primary" position="floating">Title</ion-label>
+      <ion-label color="tertiary" position="floating">Title</ion-label>
       <ion-input type="text" formControlName="title" required></ion-input>
     </ion-item>
     <ion-item>
-      <ion-label color="primary" position="floating">Description</ion-label>
+      <ion-label color="tertiary" position="floating">Description</ion-label>
       <ion-input type="text" formControlName="description" required></ion-input>
     </ion-item>
     <ion-button class="submit-btn" expand="block" type="submit" [disabled]="!new_item_form.valid">Create</ion-button>

src/app/pages/update-item/update-item.page.html

@@ -1,5 +1,5 @@
 <ion-header>
-  <ion-toolbar color="primary">
+  <ion-toolbar color="tertiary">
     <ion-title>Update Item</ion-title>
     <ion-buttons slot="start">
       <ion-back-button></ion-back-button>
@@ -10,13 +10,14 @@
 <ion-content *ngIf="item" padding>
   <form [formGroup]="edit_item_form" (ngSubmit)="updateItem(edit_item_form.value)">
     <ion-item>
-      <ion-label color="primary" position="floating">Title</ion-label>
+      <ion-label color="tertiary" position="floating">Title</ion-label>
       <ion-input type="text" formControlName="title" required></ion-input>
     </ion-item>
     <ion-item>
-      <ion-label color="primary" position="floating">Description</ion-label>
+      <ion-label color="tertiary" position="floating">Description</ion-label>
       <ion-input type="text" formControlName="description" required></ion-input>
     </ion-item>
     <ion-button class="submit-btn" expand="block" type="submit" [disabled]="!edit_item_form.valid">Update</ion-button>
   </form>
+  <ion-button class="submit-btn" expand="block" (click)="deleteItem(item)" type="submit">Delete</ion-button>
 </ion-content>

src/app/pages/update-item/update-item.page.ts

@@ -51,4 +51,9 @@ export class UpdateItemPage implements OnInit {
     this.goBack();
   }
 
+  deleteItem(value){
+    this.itemService.deleteItem(value);
+    this.goBack();
+  }
+
 }

src/app/services/item.service.ts

@@ -26,6 +26,11 @@ export class ItemService {
       'title': "Example 4",
       'description': 'description 4'
     },
+    {
+      'id': "6",
+      'title': "Example 5",
+      'description': 'This is example 5'
+    },
     {
       'id': "5",
       'title': "Need a more complex app?",
@@ -58,4 +63,13 @@ export class ItemService {
     let itemIndex = this.items.findIndex(item => item.id == newValues.id);
     this.items[itemIndex] = newValues;
   }
+
+  deleteItem(value){
+    this.removeItemFromArr(this.items,value)
+  }
+
+  removeItemFromArr(arr,item){
+    var i = arr.indexOf(item);
+    arr.splice(i,1);
+}
 }