title: Angular: Adding a side bar to most pages (router) without using root-component?
body: <p>I know the normal is to have your <code>app-root</code> (root component) have the toolbar, sidebar etc added there and have a <code>&lt;router-outlet&gt;</code> to change the content.</p>
  
  <p>My problem is my root component (app-root) that is injected via the index.html like so</p>
  
  <pre><code>&lt;body&gt;
    &lt;app-root&gt;&lt;/app-root&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>cannot contain the sidebar, menus etc as I wish to offer a Login Screen (and other screens) that mustn't contain these semi-shared components. So right now my app-root contains a simple <code>&lt;router-outlet&gt;</code> which works great for my login and other pages that must NOT share the shared content i.e. sidebar, menus etc.</p>
  
  <p>I was hoping to use something like auxiliary/child routes but I don't fully understand them. A good scenario would be that the login screen continues to work as is, it gets injected into the router-outlet but all other routes need to inject themselves into the router-outlet as well as some shared content.</p>
  
  <pre><code>&lt;md-sidenav-container class="example-container"&gt;
    &lt;md-sidenav #sidenav class="example-sidenav"&gt;
      An example of content  in the side bar
    &lt;/md-sidenav&gt;
  
    &lt;div class="example-sidenav-content"&gt;
  
       &lt;!-- All other routes should be injected here --&gt;       
  
    &lt;/div&gt;
  
  &lt;/md-sidenav-container&gt;
  </code></pre>
  
  <p>What should I do here ?</p>
  
  <p>I certainly don't want to place the sidebar, menus in every component by means of copy / paste. It should be shared content.</p>