3

I am new in angular material following material.angular.io I want to have sidnav on multiple pages the code they provide for sidenav contains sidenav as well as well as content of page, as below

    <mat-drawer-container class="sidebar-container" autosize>

      <mat-drawer #drawer class="sidebar-sidenav" mode="side">
        <!--sidenav content(links) goes here-->
        <app-sidenav></app-sidenav>

      </mat-drawer>

      <div class="sidebar-sidenav-content">
         <!--page content goes here-->
         <p>page content area</p>
      </div>

   </mat-drawer-container>

if I want to reuse the same sidenav on multiple page I will have to write same code again and again in all pages bcz it is not working if I move out .sidebar-sidenav-content from mat-drawer-container like this

<mat-drawer-container class="sidebar-container" autosize>

  <mat-drawer #drawer class="sidebar-sidenav" mode="side">
    <!--sidenav content goes here-->
    <app-sidenav></app-sidenav>

  </mat-drawer>


  <div class="sidebar-sidenav-content">
     <!--page content goes here-->
     <p>page content area</p>
  </div>

the above structure show page content area sidebar-sidenav-content below sidenav, while I want side by side.

usp
  • 31
  • 1
  • 3
  • Personally, I've always used it on the main app component, but I like your idea. I think you could try on creating an apposite component which contains on its HTML only the sidenav code. Then you can include it with the HTML tag containing its selector, for example "" if you will name it so... Try this, it's just a suggestion but let me know if it works – Deadpool Apr 19 '18 at 12:23
  • I have already created `app-sidenav` and included it inside `mat-drawer`, but think if I want the sidenav for 2nd,3rd... component I will have to write `mat-drawer-container` `mat-drawer` etc repeatedly in each component.html – usp Apr 19 '18 at 12:44
  • Good, try to add even the mat-drawer-container etc... code in a component and try to call it with the selector tag into another component. Does it work? Obvoiusly, I think you will have to manage page component positioning correctly, with divs and other. My only fear is that it will become a not-full sized sidebar... But try with this – Deadpool Apr 19 '18 at 12:46
  • 2
    The purpose of `` is to provide single-page-application (SPA) functionality. It is designed to hold left and right drawers and page content. The page content is normally "routed" to the container's page content area by the navigation router. It is not intended to be used the way you are attempting - i.e. to have multiple application pages each with it's own copy of the sidenav. I'm not sure whether you have a genuine need for that or if you are just too "new" to know how it is meant to be done. Personally, I think it is a bad idea for a number of reasons. – G. Tranter Apr 19 '18 at 14:19
  • I have the same question of having a single sidenav through out the application, especially when you show this sidenav only on smaller devices, where the top horizontal menu cant be displayed. Today is there a native material way to achieve this. And how about putting it on the main app component and placing the router outlet within the content area so that the options load there by default. – Subbu Jan 16 '20 at 12:40

1 Answers1

1

I completed a similar task recently and it is very doable. Please see Dynamic Expanding Nav Drawer Example by Michael Prentice. You can create other objects like the 'navItems' in the example and use the page title or other route data to find the related sidenav items :

<mat-sidenav #appDrawer mode="over" opened="false">
<mat-nav-list>
  <app-menu-list-item *ngFor="let item of navItems" [item]="item"></app-menu-list-item>
</mat-nav-list>

While this offers the flexibility of very little code if there are future changes in the app, implementing routing and guards can be challenging so you might want to design those first.

Papa Kojo
  • 793
  • 8
  • 18