Angular 7 multiple router outlets for a dashboard app

Question

I have a primary outlet for displaying home, dashboard, request form.

Dashboard is a gallery for displaying different kind of tiles like chart, table.

I want an outlet in each tile of dashboard to show either chart or table.

Since there are multiple tile instances and if its the same outlet in each tile, am afraid every tile would respond to the navigation request to a /tile/chart or /tile/table. I should be able to differentiate between each tiles outlet.

Primary outlet -> Home, Dashboard, Request.

Dashboard -> Tile components with another outlet to show chart/list.

HomeComponent

  <router-outlet></router-outlet>  //outlet for dashboard, request

Routes:

  {
    path: 'dashboard',
    component: DashboardComponent  //main outlet
  }, 
  {
    path: 'home',
    component: HomeComponent       // main outlet 
  }

Dashboard Component:

   <Tile> --outlet for chart/table -- </Tile> //Tile 1
   <Tile> --outlet for chart/Table -- </Tile> //Tile 2 and so on.

Answer 1

If I understood you right you do not need nested outlets/child routes because you do not plan to Navigate to you charts/tables somehow. Routing used in common when you plan to change content depending on the url. For example you have more then 1 page on your dashboard and want to let user switch among them. Then you should have routes like /dashboard/1, /dashboard/2 etc. But as far as I understood you want to show dashboard with dynamically defined tiles/widgets, right? So all you need is some data structure that defines what to show and some set of components to display that things. You will have 1 main component - dashboard with the route /dashboard and some components each displaying 1 type of tiles. Something like this:

<div *ngFor="let line of widgetLines; let i = index">
    <div *ngFor="let group of line.groups; let j = index">
        <div *ngFor="let widget of group.widgets; let k = index">
            <ng-container [ngSwitch]="widget.type">
                <db-widget-one *ngSwitchCase="1" [data]="widget.data" (onSettingsUpdated)="updateWidget(i, j, k, $event)"></db-widget-one>
                <db-widget-two *ngSwitchCase="2" [data]="widget.data" (onSettingsUpdated)="updateWidget(i, j, k, $event)"></db-widget-two>
                <db-widget-three *ngSwitchCase="3" [data]="widget.data" (onSettingsUpdated)="updateWidget(i, j, k, $event)"></db-widget-three>
                <div *ngSwitchDefault>Unknown widget type: {{widget.type | json}}</div>
            </ng-container>
        </div>
    </div>
</div>