Hide Mat Sidebar and Mat Tool bar on specific components

Question

I have a simple log-in component just like the pic below:

I have a mat-sidenav component to navigate through components. This is an example of my mat-sidenav:

<mat-toolbar class="mat-elevation-z8">
<button mat-icon-button *ngIf="sidenav.mode === 'over'" (click)="sidenav.toggle()">
    <mat-icon *ngIf="!sidenav.opened">
        menu
    </mat-icon>
    <mat-icon *ngIf="sidenav.opened">
        close
    </mat-icon>
</button>
<a routerLink="/home">

    
</a>
</mat-toolbar>

<mat-sidenav-container>
<mat-sidenav #sidenav="matSidenav" class="mat-elevation-z8">
    

    <h4 class="name">Juan Perez</h4>
    <p >Chef</p>

    <mat-divider></mat-divider>

    <a mat-button class="menu-button" data-toggle="collapse" href="#collapseColaboradores" role="button" aria-expanded="false" aria-controls="collapseColaboradores">
        <mat-icon>person</mat-icon>
        <span>Pacientes</span>
    </a>
    <div class="collapse" id="collapseColaboradores">
        <li>
            <a class="nav-links-menu" routerLink="/formulariopaciente/nuevo">

                <i class="fa fa-caret-right"></i><span class="link-text-menu">Formulario Pacientes</span>
            </a>
        </li>
        <li>
            <a class="nav-links-menu" routerLink="/busquedapaciente/busqueda">

                <i class="fa fa-caret-right"></i>
                <span class="link-text-menu">Ingreso Pacientes</span>
            </a>
        </li>
        <li>
            <a class="nav-links-menu" routerLink="/listapacientes">

                <i class="fa fa-caret-right"></i>
                <span class="link-text-menu">Ingresos Diarios</span>
            </a>
        </li>
       

    </div>        

    <mat-divider></mat-divider>

    <button mat-button class="menu-button">
        <mat-icon>help</mat-icon>
        <span>Help</span>
    </button>

</mat-sidenav>
<mat-sidenav-content>
    <div class="content">
        <router-outlet></router-outlet>
    </div>
</mat-sidenav-content>

What I'm trying to achieve is to hide the sidenav and the toolbar when I'm in the login component. Placing app-sidenav on app.component.html shows the login with both bars (I assume it's because I have the router-outlet inside the mat-sidenav-content) but I don't know another way to achieve this. I actually have 2 components (login and other one) where I need them hidden...I'm trying to think a better way but I don't find any solution :(.

Thanks !!

Does this answer your question? How to hide the Angular Material Sidenav when a user clicks a link — Giovanni Esposito

Mohamed.Karkotly Mohamed.Karkotly · Accepted Answer · 2021-07-20T13:28:33

So i know this amswer might change your folders structure, but i believe this would be better and lowers the overhead, and it's the other way you're looking for i guess.

I suggest to place all login, sign up, forgot password, etc.. components in a seperated module, call it AuthModule.

And make a shared module for app-header, app-sidenav, app-footer components, call it SharedModule.

(You can organize this even more by creating a component for each sidenav anochor tag or a link)

Now make a module name it HomeModule, create your components, and just call the 3 tags you made in the SharedModule in all required pages.

Here are couple of basic snapshots.

Folders Structure

Usage of Shared Components

Hope this helped.

Hide Mat Sidebar and Mat Tool bar on specific components

1 Answers