Angular 4 routing component in component

Question

I have a DashboardComponent that is being loaded if the router is at /client and the same for /product:

export const routes: Routes =
[
    { path: '', component: HomeComponent },
    { path: 'client', component: DashboardComponent },
    { path: 'product', component: DashboardComponent }

];

@NgModule({
  imports: [ RouterModule.forRoot(routes) ],
  exports: [ RouterModule ]
})
export class RoutesModule { }

And I then load the different components in like this (in dashboard.component.ts):

this.router.events.subscribe(path => {

    if (this.router.url == "/client") {
        this.isClient = true;
    }

    if (this.router.url != "/client") {
        this.isClient = false;
    }
    if (this.router.url == "/product") {
        this.isProduct = true;
    }

    if (this.router.url != "/product") {
        this.isProduct = false;
    }

});

Then in the dashboard.component.html I do:

<app-client *ngIf="isClient"></app-client>
<app-product *ngIf="isProduct"></app-product>

I feel like this is not the way to do it but I cannot find a good explanation on how to implement that if you go to e.g. /dashboard/client it loads the ClientComponent inside of the DashboardComponent and the same for ProductComponent

Answer 1

You can accomplish this with child router-outlets

// routing.module.ts
export const routes: Routes = [
    { path: '', component: HomeComponent },
    {
        path: 'dashboard',
        component: DashboardComponent,
        children: [
            {
                path: 'client',
                component: ClientComponent
            },
            {
                path: 'product',
                component: ProductComponent
            }
        ]
    }
]

and add the child router outlet to your DashboardComponent

<div>
    dashboard component
    <router-outlet></router-outlet>
</div>

So when the user goes to /dashboard/client, DashboardComponent is loaded in the top level router-outlet, and ClientComponent is loaded into the child router-outlet (inside of DashboardComponent). Here is a stackblitz demoing this