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.

Are you trying to navigate to 'dashboard/tile/chart'? or to 'dashboard'? — bsheps, Apr 02 '19 at 20:20
I am able to navigate to dashboard from home. The dashboard has few tiles. I want to have a secondary outlet in each tile to show either a chart or table based on its inputs — Rk R Bairi, Apr 02 '19 at 20:26
If I understand you need a router outlet child inside dashboard component. For example split in modules. You can have "AppModule", "DashboardModule", etc. In the AppModule you have (as now you have) the main outlet. And in the dashboard module you can have another router outlet, so in dashboard you can define new routes: "/tile/chart", "tile/..." and those components you will link will be rendered in the dashboard router outlet — Kalamarico, Apr 02 '19 at 20:32
In dashboard module, if each tile component has that outlet to consume /tile/chart or /tile/table, wouldn't each tile outlet respond to the navigation request since the outlet is repeated in all tiles of dashboard @Kalamarico — Rk R Bairi, Apr 02 '19 at 20:37
I didn't said to make one outlet for tile. Only one router-outlet more than you have (you have only one right? in appModule). Inside the dashboard component template, set a new router-outlet, and in routes define, you can mach those tiles path and they will be rendered in that router-outlet — Kalamarico, Apr 02 '19 at 20:39
Another option is to use `ngSwitch` to switch out tiles based on input instead of having the aux router outlets. — Jason White, Apr 02 '19 at 20:43

Dimanoid · Accepted Answer · 2019-04-02T21:05:23.573

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>

I have been doing the same thus far to switch between the widgets. The reason I started on routing options is , I had a new requirement wher there would be a setting button on each tile. On clicking that settings button, a request form would show up. On submit of request, I needed to switch between the widget based on response. I will now try to link that response to tile directly isntead of thinking about routing. — Rk R Bairi, Apr 02 '19 at 20:56
Dont see the problem here, you know what widget user wants to edit - after adjusting the settings update coresponding `widgetLines[i].groups[j].widget[k]` and view will be updated as well. — Dimanoid, Apr 02 '19 at 21:03

Angular 7 multiple router outlets for a dashboard app

1 Answers1