Change route to 'participant/room/:roomId' which shows the ParticipantRoomCompent

src/app/app-routing.module.ts

@@ -8,6 +8,7 @@ import { CreateCommentComponent } from './create-comment/create-comment.componen
 import { ParticipantHomeScreenComponent } from './participant-home-screen/participant-home-screen.component';
 import { AuthenticationGuard } from './authentication.guard';
 import { UserRole } from './user-roles.enum';
+import { ParticipantRoomComponent } from './participant-room/participant-room.component';
 
 const routes: Routes = [
   { path: '', redirectTo: '/home', pathMatch: 'full' },
@@ -34,6 +35,12 @@ const routes: Routes = [
     canActivate: [AuthenticationGuard],
     data: { roles: [UserRole.PARTICIPANT] }
   },
+  {
+    path: 'participant/room/:roomId',
+    component: ParticipantRoomComponent,
+    canActivate: [AuthenticationGuard],
+    data: { roles: [UserRole.PARTICIPANT] }
+  },
   { path: '**', component: PageNotFoundComponent }
 ];
 

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

 <mat-list>
   <mat-list-item *ngFor="let room of rooms">
-    <button mat-button routerLink="/room/{{room.id}}">
+    <button mat-button routerLink="room/{{room.id}}">
       {{room.name}}
     </button>
   </mat-list-item>