CODEWITHSUNDEEP
angularangular-material2
Demiro-FE-Architect
Demiro-FE-Architect

Reputation: 3740

Angular4 material: How to load content to sidenav

So I have put my sidenav in app.component, something like:

<md-sidenav-container fullscreen> 
  <md-sidenav #sidepanel>...</md-sidenav>
  <div class="app">
    <main>
      <router-outlet></router-outlet>
    </main>
  </div>
</md-sidenav-container>

now, I have put the reference to the sidenav to my siteService that is overlooking everything and I am able to control it from whenever component I inject siteService.

I would like to load content inside on the fly (similar to what router-outlet does with router-naviagtion...

let's say I would like to load XyComponent1 or XyComponent2 to the sidenav, how would I do that programatically?

Upvotes: 2

Views: 3166

Answers (1)

Z. Bagley
Z. Bagley

Reputation: 9260

You can do this using an aux route:

<md-sidenav-container fullscreen> 
  <md-sidenav>
    <router-outlet name="sidenav"></router-outlet>
  </md-sidenav>
  <div class="app">
    <main>
      <router-outlet></router-outlet>
    </main>
  </div>
</md-sidenav-container>

And you can control it by passing the outlet name:

<a [routerLink]="[{ outlets: { 'sidenav': ['sidenav-component1'] } }]">
  Click to apply new sidenav.
</a>

You'll also need to define the components for the routes. This guide is a great excerpt for more details on using aux routes.

Upvotes: 3

Related Questions