0

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 import { Routes } from '@angular/router';

TS

// 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 
  },
];

HTML

  <table class="table">
    <thead class="dark-text blue-grey lighten-5">
      <tr>
        <th class="text-center">Room Name</th>
        <th class="text-center">Date Created</th>
        <th class="text-center">Actions</th>
        <th class="text-center">View Room</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor='let room of roomList' >
        <td class="text-center">{{room.name}}</td>
        <td class="text-center">{{room.timeStamp}}</td>
        <td class="text-center">
            <i class="fa fa-pencil-square-o iconTable orange-text" (click)="onEdit(room)"></i>
            <i class="fa fa-trash-o iconTable red-text text-center" (click)="onDelete(room.$key)"></i>
        </td>
        <td class="text-center">
          <a routerLink="{{room.name}}">View</a>
        </td>
      </tr>
    </tbody>
  </table>

    <router-outlet></router-outlet>

Before posting this questions I google several tutorials, but I didn't find one that answered my needs.

I have also taken a look to the following stackoverflow questions:

Angular 6 - Dynamic Routing with Prefix

Using regex for path value of routes in angular2

Patricio Vargas
  • 5,236
  • 11
  • 49
  • 100

2 Answers2

2

Use path part like this - path: rooms/:roomId Refer here - https://angular.io/tutorial/toh-pt5

Abhi Anand
  • 21
  • 1
  • 7
2

Try changing to this:

{
  path: 'rooms/:id',
  component: RoomsComponent
}

and

<a [routerLink]="['/rooms', room.name]">View</a>

where room.name has value like: "room123"

SHN
  • 171
  • 5