Add remove-moderator functionality

src/app/components/creator/_dialogs/moderators/moderators.component.html

@@ -13,6 +13,12 @@
   </div>
   <h3 *ngIf="moderators.length === 0">No moderators yet.</h3>
   <mat-list *ngIf="moderators.length > 0">
-    <mat-list-item *ngFor="let moderator of moderators">{{moderator.userId}}</mat-list-item>
+    <mat-list-item *ngFor="let moderator of moderators">
+      {{moderator.userId}}
+      <span class="fill-remaining-space"></span>
+      <button mat-icon-button (click)="removeModerator(moderator.userId)">
+        <mat-icon class="close">close</mat-icon>
+      </button>
+    </mat-list-item>
   </mat-list>
 </div>

src/app/components/creator/_dialogs/moderators/moderators.component.scss

@@ -27,6 +27,10 @@ mat-form-field {
   line-height: 100% !important;
 }
 
+.close {
+  color: var(--red);
+}
+
 .mat-list-item {
   color: var(--on-surface);
 }

src/app/components/creator/_dialogs/moderators/moderators.component.ts

@@ -44,7 +44,10 @@ export class ModeratorsComponent implements OnInit {
         return;
       }
       this.moderatorService.add(this.roomId, list[0].id).subscribe();
-      this.getModerators();
     });
   }
+
+  removeModerator(userId: string) {
+    this.moderatorService.delete(this.roomId, userId).subscribe();
+  }
 }