How to make subitems with the SideNav component of the Angular Material Design

Question

How to make subitems with the SideNav component of the Angular Material Design

Navigation

#1 by (1 votes)

0

I made a menu using Angle Material Design's SideNav like this:

<mat-sidenav-container class="sidenav-container">
    <mat-sidenav #drawer class="sidenav" fixedInViewport="true" [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'" [mode]="(isHandset$ | async) ? 'over' : 'side'" [opened]="!(isHandset$ | async)">
        <mat-toolbar>Menu</mat-toolbar>
        <mat-nav-list>
            <a mat-list-item href="#">Clubes</a>
            <a mat-list-item href="#">Gestores de Clubes</a>
            <a mat-list-item href="#">Agentes</a>
            <a mat-list-item href="#">Jogadores</a>
        </mat-nav-list>
    </mat-sidenav>
    <mat-sidenav-content>
        <mat-toolbar color="primary">
            <button type="button" aria-label="Toggle sidenav" mat-icon-button (click)="drawer.toggle()" *ngIf="isHandset$ | async">
        <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
      </button>
            <span>Painel Administrativo</span>
        </mat-toolbar>
        <ng-content></ng-content>
    </mat-sidenav-content>
</mat-sidenav-container>

Looking like this:

I wanted to make a menu, using NavBar with Sub-Items and Separation. I've been researching and found nothing. Can you make or give another suggestion?

Thank you.

angular material-design angular-material angular-6

asked by anonymous 23.11.2018 / 16:22

1 answer

How to close jframe from an actionPerformed? [duplicate] Eslint does not run on Mac

score 1 · Answer 1

Hello, how are you?

One way to create a well-structured and easy-to-maintain Navigation with Angular Material is through Navigation Schematic, which makes up the Angular CLI Schematics package.

The documentation itself is clear in approach and construction: link

In any case you can solve your problem at the moment I suggest the following approach:

<mat-sidenav-container class="sidenav-container">
    <mat-sidenav #drawer class="sidenav" fixedInViewport="true" [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'" [mode]="(isHandset$ | async) ? 'over' : 'side'" [opened]="!(isHandset$ | async)">
        <mat-toolbar>Menu</mat-toolbar>
        <mat-nav-list>
            <a mat-list-item href="#">Clubes</a>
            <a mat-list-item href="#">Gestores de Clubes
              <li>dasdsadas</li>
            </a>

            <a mat-list-item href="#">Agentes</a>
            <a mat-list-item href="#">Jogadores</a>
        </mat-nav-list>
    </mat-sidenav>
    <mat-sidenav-content>
        <mat-toolbar color="primary">
            <button type="button" aria-label="Toggle sidenav" mat-icon-button (click)=                    "drawer.toggle()">
              <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
            </button>
            <button mat-button [matMenuTriggerFor]="menu">Menu</button>
            <mat-menu #menu="matMenu">
              <button mat-menu-item>Item 1</button>
              <button mat-menu-item>Item 2</button>
            </mat-menu>
        </mat-toolbar>
        <ng-content></ng-content>
    </mat-sidenav-content>
</mat-sidenav-container>

So you can insert items in your menu that have subitems, also left the hamburger menu active as an option to hide the side menu. I hope I have helped.

My example link: See the preview in the file table-selection-example.html
link