Angular Material: Add sidenav to just a few pages?

Question

I want a subset of pages of my site to have sidebar navigation.

So, the home page and others would not have any sidebar, but one section of the site would have a sidebar. On that section, users can click on sidebar menu items to navigate to different pages within that section.

This is the same structure as Angular Material uses on its main site.

If you go to the home page, there is no sidebar. But, if you go to the components page, there is a sidebar, and you can click on sidebar menu items to navigate within the components section of the site.

How can I accomplish this structure using Angular Material's sidenav component?

Here are some more details in case helpful:

The documents say that mat-sidebar is for adding a sidebar to the whole site, and that mat-drawer is just for one section, so I assume I would use mat-drawer. But I don't find any examples of implementation for adding sidebar nav to one section. The tricky part is efficient code that enables me to navigate among different routes in the given section.

The basic code is like this:

html:

<mat-drawer-container class="example-container">
  <mat-drawer mode="side" opened>Drawer content</mat-drawer>
  <mat-drawer-content>Main content</mat-drawer-content>
</mat-drawer-container>

Often, you put this in app.component.html, and put in <router-outlet></router-outlet> where "Main Content" is in the code.

How do you do this when the sidebar navigation should not be for the whole site's router-outlet, but just the routes for particular components?

Answer 1

Put a <router-outlet></router-outlet> in the main app.component (surrounded by whatever other pieces of mark-up you want there)

Define some routing that has your sub-section (either lazy-loaded or not):

const routes: Routes = [
    { path: '', component: HomeComponent },
    { path: 'one', component: Page1Component },
    { path: 'two', component: Page2Component },
    {
        path: 'admin', component: AdminComponent, children: [
            { path: '', component: DashboardComponent },
            { path: 'dashboard', component: DashboardComponent },
            { path: 'users', component: UsersComponent }
        ]
    },
];

The Home, Page1 and Page2 and whatever... are just normal component pages and don't have a sidebar.

In AdminComponent put your sidenav:

<h1>Admin</h1>
<mat-sidenav-container class="example-container">
    <mat-sidenav mode="side" opened>
        <mat-action-list>
                <mat-list-item [routerLink]="['dashboard']">Dashboard</mat-list-item>
                <mat-list-item [routerLink]="['users']">Users</mat-list-item>
        </mat-action-list>
    </mat-sidenav>
    <mat-sidenav-content><router-outlet></router-outlet></mat-sidenav-content>
</mat-sidenav-container>

Sidenav is then only in existence when under the admin route.

Answer 2

Use the material sidenav API, you can make it open or closed based on your needs with a variable on the input property [opened] like this:

<mat-sidenav-container class="example-container">
    <mat-sidenav mode="side" [opened]="boolean_var | async">Sidenav content</mat-sidenav>
    <mat-sidenav-content>

        <!-- Main content -->
        <router-outlet></router-outlet>

        <br>

        <button routerLink="/without" [state]="{ open: false }">
            Page Without Sidenav
        </button>

        <br>

        <button routerLink="/with" [state]="{ open: true }">
            Page with Sidenav
        </button>

     </mat-sidenav-content>
</mat-sidenav-container>

now it's up to you to decide how to synchronize the variable with the page routing.

There are more ways, for example, you could pass a value on routing:

const routes: Routes = [
  { path: 'with', component: WithSidenavComponent, data: { open : true } },
  { path: 'without', component: WithoutSidenavComponent , data: { open : false }},
];

and set your root component like this:

  ngOnInit() {
    this.boolean_var = this.router.events.pipe(
      filter(event => event instanceof NavigationEnd),
      map( (response: NavigationEnd) => this.router.config.find( conf => conf.path == response.url.slice(1) ).data.open || false )
    );
  }