Add deletion-msg into MatDialog

src/app/app.module.ts

@@ -104,7 +104,8 @@ import { RoomDeletionComponent } from './room-deletion/room-deletion.component';
   entryComponents: [
     RegisterComponent,
     PasswordResetComponent,
-    RoomCreationComponent
+    RoomCreationComponent,
+    RoomDeletionComponent
   ],
   imports: [
     AppRoutingModule,

src/app/creator-room/creator-room.component.html

@@ -36,7 +36,7 @@
         <button *ngIf="modify" (click)="updateRoom(roomName.valueOf(), roomShortID.valueOf(), roomDescription.valueOf())" mat-button color="primary" matTooltip="Update room's details">
           Update room
         </button>
-        <button mat-button color="warn" (click)="showDeletionDialog()">
+        <button mat-button color="warn" (click)="openDeletionRoomDialog()">
           Delete room
         </button>
         <button mat-button color="primary" (click)="goBack()">

src/app/creator-room/creator-room.component.ts

@@ -5,6 +5,8 @@ import { RoomComponent } from '../room/room.component';
 import { Room } from '../room';
 import { Location } from '@angular/common';
 import { NotificationService } from '../notification.service';
+import { MatDialog } from '@angular/material';
+import { RoomDeletionComponent } from '../room-deletion/room-deletion.component';
 
 @Component({
   selector: 'app-creator-room',
@@ -22,6 +24,7 @@ export class CreatorRoomComponent extends RoomComponent implements OnInit {
   constructor(protected roomService: RoomService,
               protected notification: NotificationService,
               protected route: ActivatedRoute,
+              public dialog: MatDialog,
               protected location: Location) {
     super(roomService, route, location);
   }
@@ -60,6 +63,7 @@ export class CreatorRoomComponent extends RoomComponent implements OnInit {
         .subscribe(() => this.goBack());
     }
   }
+
   showDeletionDialog(): void {
     this.deleteDialog = true;
   }
@@ -73,4 +77,10 @@ export class CreatorRoomComponent extends RoomComponent implements OnInit {
     this.notification.show(msg);
     this.delete(room);
   }
+
+  openDeletionRoomDialog(): void {
+    this.dialog.open(RoomDeletionComponent, {
+      width: '350px'
+    });
+  }
 }

src/app/room-deletion/room-deletion.component.html

-<p>
-  room-deletion works!
-</p>
+<mat-card>
+  <mat-card-header><h3>Do you really want to delete this room?<br>This action can not be undone.</h3>
+  </mat-card-header>
+  <mat-card-content>
+    <button mat-raised-button color="warn">
+      Delete room
+    </button>
+    <button mat-raised-button color="primary">
+      Leave
+    </button>
+  </mat-card-content>
+</mat-card>