How to fit different components into mat-sidenav-content?-CodePudding

I am trying to build an Angular web app that features an Angular Material Sidenav on top of each page. I want to have the sidenav appear above each component, but the tag takes up the entire screen, pushing the components out of view. The solution for a single component would be to do something like this:

<mat-sidenav-content>
  <app-example></app-example>
</mat-sidenav-content>

However, I need to use this for multiple components on different pages and I would like to avoid copying the sidenav code for each particular component.

CodePudding user response：

It needs to be done similar to what you did, but instead of 'manually load' the desired component, you have to use the Angular Router and its Routes to do it, using "< router-outlet></ router-outlet >" instead of the component names, like this:

<mat-sidenav-content>
  <router-outlet></router-outlet>
</mat-sidenav-content>

As I see you a little bit lost about it, I leave you HERE a documentation with further and detailed explanation, HERE an stackblitz example with a forked classic layout example, where you can see how it goes and where you can tinker at will.