Make use of new components

Navigate to new content creation page when clicking on "Create new content"
Make ContentCreation component a component (not a MatDialog)
Add new routes to new pages

src/app/app-routing.module.ts

@@ -11,9 +11,10 @@ import { ParticipantRoomComponent } from './participant-room/participant-room.co
 import { CreatorRoomComponent } from './creator-room/creator-room.component';
 import { CommentListComponent } from './comment-list/comment-list.component';
 import { ContentListComponent } from './content-list/content-list.component';
-import { ContentCreationComponent } from './content-creation/content-creation.component';
 import { ContentDetailComponent } from './content-detail/content-detail.component';
 import { AnswerStatisticsComponent } from './answer-statistics/answer-statistics.component';
+import { AddContentComponent } from './add-content/add-content.component';
+import { ParticipantContentCarouselPageComponent } from './participant-content-carousel-page/participant-content-carousel-page.component';
 
 const routes: Routes = [
   { path: '', redirectTo: '/home', pathMatch: 'full' },
@@ -47,14 +48,14 @@ const routes: Routes = [
     data: { roles: [UserRole.CREATOR] }
   },
   {
-    path: 'creator/room/:roomId/answer-statistics',
-    component: AnswerStatisticsComponent,
+    path: 'creator/room/:roomId/add-content',
+    component: AddContentComponent,
     canActivate: [AuthenticationGuard],
     data: { roles: [UserRole.CREATOR] }
   },
   {
-    path: 'creator/room/:roomId/content-creation',
-    component: ContentCreationComponent,
+    path: 'creator/room/:roomId/answer-statistics',
+    component: AnswerStatisticsComponent,
     canActivate: [AuthenticationGuard],
     data: { roles: [UserRole.CREATOR] }
   },
@@ -70,7 +71,8 @@ const routes: Routes = [
     canActivate: [AuthenticationGuard],
     data: { roles: [UserRole.CREATOR] }
   },
-  { path: 'participant/room/:roomId/create-comment',
+  {
+    path: 'participant/room/:roomId/create-comment',
     component: CreateCommentComponent,
     canActivate: [AuthenticationGuard],
     data: { roles: [UserRole.PARTICIPANT] }

src/app/app.module.ts

@@ -77,6 +77,9 @@ import { AnswerStatisticsComponent } from './answer-statistics/answer-statistics
 import { RoomModificationComponent } from './room-modification/room-modification.component';
 import { ParticipantChoiceContentComponent } from './participant-choice-content/participant-choice-content.component';
 import { CreatorChoiceContentComponent } from './creator-choice-content/creator-choice-content.component';
+import { AddContentComponent } from './add-content/add-content.component';
+import { ParticipantContentCarouselPageComponent } from './participant-content-carousel-page/participant-content-carousel-page.component';
+import { ParticipantTextContentComponent } from './participant-text-content/participant-text-content.component';
 
 @NgModule({
   declarations: [
@@ -107,6 +110,9 @@ import { CreatorChoiceContentComponent } from './creator-choice-content/creator-
     RoomModificationComponent,
     ParticipantChoiceContentComponent,
     CreatorChoiceContentComponent,
+    AddContentComponent,
+    ParticipantContentCarouselPageComponent,
+    ParticipantTextContentComponent,
     AnswerStatisticsComponent
   ],
   entryComponents: [

src/app/content-creation/content-creation.component.ts

@@ -19,13 +19,10 @@ export class ContentCreationComponent implements OnInit {
 
   constructor(private contentService: ContentService,
               private router: Router,
-              private notification: NotificationService,
-              public dialogRef: MatDialogRef<RoomComponent>,
-              @Inject(MAT_DIALOG_DATA) public data: any) {
+              private notification: NotificationService) {
   }
 
   onNoClick(): void {
-    this.dialogRef.close();
   }
 
   ngOnInit() {
@@ -45,8 +42,7 @@ export class ContentCreationComponent implements OnInit {
     this.contentService.addContent({ subject: subject, body: body, roomId: this.roomId } as Content)
       .subscribe(content => {
         this.notification.show(`Content '${content.subject}' successfully created.`);
-        this.router.navigate([`/creator/room/${content.roomId}/${content.contentId}`]);
-        this.dialogRef.close();
+        // this.router.navigate([`/creator/room/${content.roomId}/${content.contentId}`]);
       });
   }
 }

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

@@ -21,7 +21,8 @@
       <app-content-list></app-content-list>
       <mat-divider></mat-divider>
       <mat-card-actions>
-        <button mat-button color="primary" matTooltip="Create new content" (click)="createContentDialog()">
+        <button mat-button color="primary" matTooltip="Create new content"
+                routerLink="/creator/room/{{room.id}}/add-content">
           Create content
         </button>
         <button mat-button color="primary" matTooltip="See room comments" routerLink="/creator/room/{{room.id}}/comments">