Display content underneath tab rather than going to new page

Question

In one of the pages of my application I've got tabs with one setup like so:

        <igx-tab-item>
          <igx-tab-header [routerLink]="['projectsor', libraryId]">
            <span igxTabHeaderLabel>View Project SOR</span>
          </igx-tab-header>
        </igx-tab-item>

At the moment that tab will take take you to a new page, what I am trying to change however is to just have the data displayed underneath that tab but I am not sure how I can go about this. I am aware that using router-outlet would be my best bet but I'm not sure where I'm going wrong with this.

I have changed it to like so:

        <igx-tab-item>
          <igx-tab-header>
            <span igxTabHeaderLabel>View Project SOR</span>
          </igx-tab-header>
          <igx-tab-content>
            <router-outlet></router-outlet>
          </igx-tab-content>
        </igx-tab-item>

and in my routing file I have the following:

const routes: Routes = [
  { path: 'detail', component: ProjectDetailComponent},
  { path: 'detail/:id', component: ProjectDetailComponent},
  { path: 'detail/:id/projectsor/:libraryId', component: LibraryDetailComponent,
    children: [
    {path: '', component: LibrarySetupComponent},
    {path: 'disciplines', component: DisciplineListComponent},
    {path: 'jointdisciplines', component: JointDisciplineListComponent},
    {path: 'materials', component: MaterialListComponent},
    {path: 'weights', component: WeightItemListComponent},
    {path: 'schedules/:disciplineId', component: ScheduleListComponent},
    {path: 'r6/:disciplineId/:scheduleId', component: R6ItemListComponent},
    {path: 'r7/:disciplineId/:scheduleId', component: R7ItemListComponent},
  ]},
  { path: '', component: ProjectListComponent }
];

The content I am wanting to show is from:

path: 'detail/:id/projectsor/:libraryId', component: LibraryDetailComponent,

how can I let the router-outlet know what I am wanting it to show?

Answer 1

Found out how to fix my error, was more sorting the paths rather than creating a secondary outlet. In my routing file I just had to update it like so:

const routes: Routes = [
  { path: 'detail', component: ProjectDetailComponent},
  { path: 'detail/:id', component: ProjectDetailComponent,
    children: [
      { path: 'projectsor/:libraryId', component: LibraryDetailComponent,
        children: [
        {path: '', component: LibrarySetupComponent},
        {path: 'disciplines', component: DisciplineListComponent},
        {path: 'jointdisciplines', component: JointDisciplineListComponent},
        {path: 'materials', component: MaterialListComponent},
        {path: 'weights', component: WeightItemListComponent},
        {path: 'schedules/:disciplineId', component: ScheduleListComponent},
        {path: 'r6/:disciplineId/:scheduleId', component: R6ItemListComponent},
        {path: 'r7/:disciplineId/:scheduleId', component: R7ItemListComponent}
    ]}
]},
  { path: '', component: ProjectListComponent }
];

and then in the html do:

        <igx-tab-item routerLinkActive #rlaSOR="routerLinkActive" [selected]="rlaSOR.isActive">
          <igx-tab-header [routerLink]="['projectsor', libraryId]">
            <span igxTabHeaderLabel>View Project SOR</span>
          </igx-tab-header>
          <igx-tab-content>
            <router-outlet></router-outlet>
          </igx-tab-content>
        </igx-tab-item>