title: Dynamic routing with Angular in runtime
body: <p>I'm creating this app in angular where the user can create rooms which will be stored in a db. Once the user has created a room, the rooms will appear in a table, where any user can click on the rooms that have been created to open. I want the links to be dynamic. e.g: myapp.com/rooms/room123. I'm using <code>import { Routes } from '@angular/router';</code></p>
  
  <p><strong>TS</strong></p>
  
  <pre><code>// routerConfig.ts
  import { Routes } from '@angular/router';
  import { AppComponent } from './app.component';
  import { NavbarComponent } from './navbar/navbar.component';
  import { HomepageComponent } from './homepage/homepage.component';
  import { RoomsComponent } from './rooms/rooms.component';
  import { RoommainComponent } from './roommain/roommain.component';
  
  export const appRoutes: Routes = [
    { path: 'home', 
      component: HomepageComponent 
    },
    { path: '',
     component: HomepageComponent },
    {
      path: 'rooms',
      component: RoomsComponent
    },
    {
      /*This will be the component that will render the infomation
      of the room the user has clicked on
      */
      path: 'dyanmicRoom',
      component: RoommainComponent 
    },
  ];
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>  &lt;table class="table"&gt;
      &lt;thead class="dark-text blue-grey lighten-5"&gt;
        &lt;tr&gt;
          &lt;th class="text-center"&gt;Room Name&lt;/th&gt;
          &lt;th class="text-center"&gt;Date Created&lt;/th&gt;
          &lt;th class="text-center"&gt;Actions&lt;/th&gt;
          &lt;th class="text-center"&gt;View Room&lt;/th&gt;
        &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
        &lt;tr *ngFor='let room of roomList' &gt;
          &lt;td class="text-center"&gt;{{room.name}}&lt;/td&gt;
          &lt;td class="text-center"&gt;{{room.timeStamp}}&lt;/td&gt;
          &lt;td class="text-center"&gt;
              &lt;i class="fa fa-pencil-square-o iconTable orange-text" (click)="onEdit(room)"&gt;&lt;/i&gt;
              &lt;i class="fa fa-trash-o iconTable red-text text-center" (click)="onDelete(room.$key)"&gt;&lt;/i&gt;
          &lt;/td&gt;
          &lt;td class="text-center"&gt;
            &lt;a routerLink="{{room.name}}"&gt;View&lt;/a&gt;
          &lt;/td&gt;
        &lt;/tr&gt;
      &lt;/tbody&gt;
    &lt;/table&gt;
  
      &lt;router-outlet&gt;&lt;/router-outlet&gt;
  </code></pre>
  
  <p>Before posting this questions I google several tutorials, but I didn't find one that answered my needs.</p>
  
  <p>I have also taken a look to the following stackoverflow questions:</p>
  
  <p><a href="https://stackoverflow.com/questions/50654461/angular-6-dynamic-routing-with-prefix">Angular 6 - Dynamic Routing with Prefix</a></p>
  
  <p><a href="https://stackoverflow.com/questions/42002221/using-regex-for-path-value-of-routes-in-angular2/43153705#43153705">Using regex for path value of routes in angular2</a></p>