implement base delete functionality

Author: Ihor Khomiak

app/cost/cost-detail.component.html

@@ -1,12 +1,19 @@
 <ActionBar title="Details" 
-           class="action-bar"></ActionBar>
+           class="action-bar">
+    <ActionItem (tap)="onEdit()"
+        ios.systemIcon="2" ios.position="right"
+        text="Edit" android.position="popup"></ActionItem>
+    <ActionItem (tap)="onDelete()"
+        ios.systemIcon="16" ios.position="right"
+        text="Delete" android.position="popup"></ActionItem>
+</ActionBar>
 
 <StackLayout orientation="vertical"
              class="page">
     <FlexboxLayout class="m-15">
         <Label class="h2" 
                [text]="cost.quantity"></Label>
     </FlexboxLayout>
-    <Label class="tag-item small-tag-item" 
+    <Label class="tag-item small-tag-item"
            [text]="cost.type"></Label>
 </StackLayout>

app/cost/cost-detail.component.js

@@ -1,5 +1,6 @@
 import { Component, OnInit } from "@angular/core";
 import { ActivatedRoute } from "@angular/router";
+import { RouterExtensions } from "nativescript-angular/router";
 
 import { Cost } from "./cost";
 import { CostService } from "./cost.service";
@@ -15,11 +16,21 @@ export class CostDetailComponent implements OnInit {
 
     constructor(
         private costService: CostService,
-        private route: ActivatedRoute
+        private route: ActivatedRoute,
+        private routerExtensions: RouterExtensions
     ) { }
 
     ngOnInit(): void {
         const id = +this.route.snapshot.params["id"];
         this.cost = this.costService.getCost(id);
     }
+
+    onEdit(){
+        console.log('edit');
+    }
+
+    onDelete(){
+        this.costService.deleteCost(this.cost);
+        this.routerExtensions.back();
+    }
 }

app/cost/cost-detail.component.ts

@@ -42,4 +42,13 @@ export class CostService {
         activeCosts.push(newCost);
         this.costsListSource.next(activeCosts);
     }
+
+    deleteCost(costForDelete: Cost) {
+        let activeCosts = this.costsListSource.getValue();
+        var index = activeCosts.indexOf(costForDelete);
+        activeCosts.splice(index, 1);
+        this.costsListSource.next(activeCosts);
+
+        alert(costForDelete.quantity + " removed!");
+    }
 }