1

I have a standard sidenav layout along the lines of this

<mat-sidenav-container>

   <mat-toolbar></mat-toolbar>

   <router-outlet></router-outlet>

   <mat-sidenav></mat-sidenav>
   <mat-sidenav position="end"></mat-sidenav>

</mat-sidenav-container>

I want to use that second sidenav as a content area.

On this project, all of the active routes are simply Components with a Canvas Region and some basic information about the "Experiment". Perhaps some basic form sliders or controls. 

<div>
   Some Content
<div>
<canvas>
</canvas>

Basically I want the content div to go in the second sidenav container. Only the Canvas is a child of the actual component visually.

<mat-sidenav-container>

   <mat-toolbar></mat-toolbar>

   <router-outlet>
        <canvas-component>
             <canvas></canvas>
        </canvas-component>
   </router-outlet>

   <mat-sidenav></mat-sidenav>
   <mat-sidenav position="end">
       <div>
            Some Content
       <div>
   </mat-sidenav>

</mat-sidenav-container>

This seems crazy, i don't think a child should be reaching out this way and depending on a parents structure. I get that. The inverse, of having the Component add a sidenav would be much better but the sidenav has to belong to a sidenav container and so this is still outside the boundaries of the component.

So what is the best strategy instead? I can't seem to get my head around it. Would you see this as 2 components , requiring 2 outer outlets and needing a shared service so they can talk to each other? Is there a better way?

Clark
  • 2,598
  • 3
  • 27
  • 41

1 Answers1

1

If I understand correctly:

  1. Only the "canvas" sidenav should have the <router-outlet>.
  2. If the "canvas" sidenav depends on any other component for its data, you need to extract that logic into a separate service. This way, your "canvas" sidenav could independently get its data from it.
  3. If you still need two different outlets in your template, you should use aux routing, BUT - if your main content area (the homepage) is static - you don't need a route to display it, use the "home" component in your template and keep the <router-outlet> only in your "canvas" sidenav

Hope this helps!

Shaya
  • 2,792
  • 3
  • 26
  • 35
  • I updated my question. So would you split my `canvas-component` into 2 components? `canvas-component` and `canvas-component-info`. Then I would need 2 router outlets? One for the main region of the page, and one for the sidenav? Then I need a Service so that these can talk to each other? – Clark Nov 15 '17 at 07:19
  • 1) Not sure splitting the canvas component is necessary. 2) If you need 2 different outlets in your template you shoud use [aux routing](https://stackoverflow.com/a/34642273/3612903), but if your main content area (the homepage) is static - you don't need a route to display it, simply use the "home" component in your template and keep the `outlet` in your "canvas" sidenav. BTW, you still have 2 `` elements inside 1 `` in your example. Each should have it's own `` wrapper. As far as I know sidenavs aren't supposed to be nested. – Shaya Nov 15 '17 at 14:49
  • Thanks DotBot! I will take a look when I am home and report back! One thing is that you can have 2 sidenavs, but no more than 2. https://material.angular.io/components/sidenav/overview – Clark Nov 15 '17 at 16:16
  • Thank you again @DotBot! Aux routing is the rabbit hole I needed to find. I have decided to create a Module for each of my Canvas Experiments. Each experiment module will have a `CanvasComponent`, `InfoComponent` a `Service` for them to communicate. The Aux will send both Components to their respective outlets and they may communicate via the service. I really appreciate your thoughts on this as I was stuck cold. – Clark Nov 17 '17 at 18:47
  • 1
    Sounds like a plan :) sure thing @Clark! – Shaya Nov 18 '17 at 20:10