Add dialog on delete

frontend/src/app/component/einstellungen/einstellungen.component.html

@@ -15,7 +15,7 @@
           </button>
         </div>
         <div class="col-1 padding-0 margin-auto">
-          <button mat-icon-button (click)="deleteFeed(feed.id)">
+          <button mat-icon-button (click)="deleteDialog(feed.id)">
             <mat-icon>delete</mat-icon>
           </button>
         </div>

frontend/src/app/component/einstellungen/einstellungen.component.ts

@@ -6,6 +6,8 @@ import {NGXLogger} from 'ngx-logger';
 import {IFeed} from '../../interfaces/feed.interface';
 import {FeedService} from '../../services/feed.service';
 import {ActivatedRoute} from '@angular/router';
+import {DialogComponent} from '../dialog/dialog.component';
+import {MatDialog} from '@angular/material/dialog';
 
 @Component({
   selector: 'app-einstellungen',
@@ -22,7 +24,8 @@ export class EinstellungenComponent implements OnInit {
               private _snackbar: MatSnackBar,
               private _logger: NGXLogger,
               private _feedService: FeedService,
-              private _route: ActivatedRoute) {
+              private _route: ActivatedRoute,
+              private _dialog: MatDialog) {
     this.icon = 'assets/logo.svg';
     this._feedService.getFeeds().toPromise().then(data => this.feeds = data).catch(err => this._logger.error(err));
   }
@@ -42,4 +45,25 @@ export class EinstellungenComponent implements OnInit {
       }
     );
   }
+
+  public deleteDialog(id: number) {
+    const dialogRef = this._dialog.open(DialogComponent, {
+      data: {
+        title: 'Feed löschen',
+        body: 'Feed wirklich löschen?',
+        abort: 'Abbrechen',
+        confirm: 'OK',
+        hideAbort: false
+      }
+    });
+
+    dialogRef.afterClosed().subscribe(
+      data => {
+        if (data === true) {
+          // Confirm button was clicked
+          this.deleteFeed(id);
+        }
+      }
+    );
+  }
 }