src/app/dashboard/dashboard.component.html

@@ -43,7 +43,7 @@
           <ng-container matColumnDef="actions">
             <th mat-header-cell *matHeaderCellDef> Actions </th>
             <td mat-cell *matCellDef="let element">
-              <button mat-flat-button color="warn" (click)="deleteLink(element.id)">Delete</button>
+              <button mat-flat-button color="warn" (click)="deleteLink(element)">Delete</button>
             </td>
           </ng-container>
 

src/app/dashboard/dashboard.component.ts

@@ -54,10 +54,19 @@ export class DashboardComponent {
     this.router.navigate(['create-link']);
   }
 
-  deleteLink(id: string) {
-    this.linkService.deleteLink(id); // TODO Check if something went wrong
-    this.links = this.links.filter(link => {
-      return link.id != id;
+  deleteLink(link: Link) {
+    this.dialog.open(ConfirmationModalComponent, {
+      data: {
+        title: "Are you sure?",
+        description: "Are you sure that you want to delete " + link.name + "?",
+      }
+    }).afterClosed().subscribe((accepted: boolean) => {
+      if (accepted) {
+        this.linkService.deleteLink(link.id); // TODO Check if something went wrong
+        this.links = this.links.filter(givenLink => {
+          return givenLink.id != link.id;
+        });
+      }
     });
   }
 }