Add delete button to component comment

src/app/comment.service.ts

@@ -18,6 +18,11 @@ export class CommentService {
     return this.http.post<Comment>(this.commentsUrl, comment, httpOptions);
   }
 
+  deleteComment(comment: Comment): Observable<Comment> {
+    const url = `${this.commentsUrl}/${comment.id}`;
+    return this.http.delete<Comment>(url, httpOptions);
+  }
+
   getComments(roomId: string): Observable<Comment[]> {
     const url = `${this.commentsUrl}/?roomId=${roomId}`;
     return this.http.get<Comment[]>(url);

src/app/comment/comment.component.html

@@ -3,14 +3,20 @@
     <li *ngFor="let comment of comments">
       <mat-card>
         <mat-card-content>
-          <h3>{{comment.subject}}</h3><br>
+          <div class="comment-body">
+            <h3>{{comment.subject}}</h3><br>
 
-         {{comment.body}}
+            {{comment.body}}
+
+            <div class="trash-icon">
+              <i class="material-icons" (click)="delete(comment)">delete</i>
+            </div>
+          </div>
         </mat-card-content>
         <mat-card-footer>
           <div class="date">
-           <i> {{comment.creationTimestamp | date:'dd-MM-yyyy HH:mm:ss' : format}} </i>
-         </div>
+           <i> Submitted on {{comment.creationTimestamp | date:'dd-MM-yyyy HH:mm:ss' : format}} </i>
+          </div>
          </mat-card-footer>
       </mat-card><br>
     </li>

src/app/comment/comment.component.scss

+.trash-icon {
+  position: absolute;
+  top: 50%;
+  left: 98%;
+}
+
 .date {
   text-align: right;
   font-size: 80%;

src/app/comment/comment.component.ts

@@ -31,8 +31,7 @@ export class CommentComponent implements OnInit {
     this.roomService.getRoom(id).subscribe(
       params => {
         this.getComments(params['id'], params['name']);
-      }
-    );
+      });
   }
 
   getComments(roomId: string, roomName: string): void {
@@ -41,6 +40,13 @@ export class CommentComponent implements OnInit {
     this.notification.show(`All comments of room "${roomName}" loaded!`);
   }
 
+  delete(comment: Comment): void {
+    this.comments = this.comments.filter(c => c !== comment);
+    this.commentService.deleteComment(comment).subscribe(room => {
+      this.notification.show(`Comment '${comment.subject}' successfully deleted.`);
+    });
+  }
+
   goBack(): void {
     this.location.back();
   }