frontend/allowance-planner-v2/src/app/pages/edit-allowance/edit-allowance.page.html

@@ -4,6 +4,11 @@
       <ion-title *ngIf="isAddMode">Create Goal</ion-title>
       <ion-title *ngIf="!isAddMode && goalId != 0">Edit Goal</ion-title>
       <ion-title *ngIf="!isAddMode && goalId == 0">Edit Allowance</ion-title>
+      <button
+        *ngIf="!isAddMode && goalId !=0"
+        class="remove-button"
+        (click)="deleteAllowance()"
+      >Delete Goal</button>
     </div>
   </ion-toolbar>
 </ion-header>

frontend/allowance-planner-v2/src/app/pages/edit-allowance/edit-allowance.page.scss

@@ -2,6 +2,13 @@
     display: flex;
 }
 
+.remove-button {
+    background-color: var(--ion-color-primary);
+    margin-right: 15px;
+    width: 100px;
+    margin-bottom: 0;
+}
+
 form {
     height: 100%;
 }

frontend/allowance-planner-v2/src/app/pages/edit-allowance/edit-allowance.page.ts

@@ -93,4 +93,9 @@ export class EditAllowancePage implements OnInit {
 
     this.router.navigate(['/tabs/allowance', this.userId]);
   }
+
+  deleteAllowance() {
+    this.allowanceService.deleteAllowance(this.goalId, this.userId);
+    this.router.navigate(['/tabs/allowance', this.userId]);
+  }
 }

frontend/allowance-planner-v2/src/app/services/allowance.service.ts

@@ -26,4 +26,8 @@ export class AllowanceService {
     updateAllowance(allowance: Partial<Allowance>, allowanceId: number, userId: number) {
         this.http.put(`${this.url}/user/${userId}/allowance/${allowanceId}`, allowance).subscribe();
     }
+
+    deleteAllowance(allowanceId: number, userId: number) {
+        this.http.delete(`${this.url}/user/${userId}/allowance/${allowanceId}`).subscribe();
+    }
 }