Angular Material Sidenav

In this article let's take a look at sidenav in agular material the first step as always is to import the module so in materila.module.ts import MatSidenavModule from @angular/material and add it to the MaterialComponents[] array.

import {
  MatSidenavModule
} from "@angular/material";

import { MatSidenavModule } from "@angular/material/badge";

const MaterialComponents = [
  MatSidenavModule,
];

Now we can add the sidenav to our application. To set up a sidenav we'll use 3 components, the first one is <mat-sidenav-container> which acts as a container to the sidenav as well as the main content within this container we have <mat-sidenav> which represent the sidenav content and then we have <mat-sidenav-content> which represent the main content, it's important that the side content and the main content are placed within the container, if you don't want some elements to be affected by this container for example header and footer you can place them outside the sidenave container.

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

If you now save the file and take a look at the browser, the output is not quite what we expect, we can see the main content but the sidenav is not seen. sidenav in agular material

Let me tell you that this is the expected behavior Sidenav is always hidden by default, there are couple of ways to open or show the sidenav the simplest way is to add the opened attribute on the <mat-sidenav> component.

<mat-sidenav-container>
  <mat-sidenav opened>Sidenav content</mat-sidenav>
  <mat-sidenav-content>Main content</mat-sidenav-content>
</mat-sidenav-container>

If you now save the file and take a look at the browser you should be able to see the Sidenav Content as well. Sidenav

The UI though is not clear so let me add some basic styling, back to app.component.scss I'm gonna add this CSS code.

mat-sidenav-container {
  height: 100%;
}
mat-sidenav,
mat-sidenav-content {
  padding: 16px;
}

mat-sidenav {
  background-color: lightcoral;
  width: 200px;
}

If you save the file and take a look at the browser you should see something like this. Styling the sidenav in angular material

Now it's more clear and the sidenav appears like and overlay on the main content and when I click outside the sidenav it closes and we can see the Main Content again. Now once we close though there is no way to open it again so rather than setting the opened attribute manually let's bind it to a property which we can control using a button for example we'll be using two-way binding, so first step is to import the FormsModule in app.module.ts and add it to the imports[] array.

import { FormsModule } from "@angular/forms";

@NgModule({
  declarations: [AppComponent],
  imports: [
    ....
    FormsModule
  ],
  ...
})
export class AppModule {}

Now let's go back to two-way binding, in app.component.ts I'm going to create a new property called opened and set it to false.

import { Component } from "@angular/core";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.scss"]
})
export class AppComponent {
  opened = false;
}

Next in the app.component.html bind the opened attribute to the opened property and create a button will toggle the opened property value so for the two-way binding we use banana in a box tags [(opened)]="opened". Next as part of the Main Content I'm gonna add a button the text is going to be Toggle Opened and add a click handler to this button (click)="opened=!opened", here is the final code to this behavior.

<mat-sidenav-container>
  <mat-sidenav [(opened)]="opened">Sidenav content</mat-sidenav>
  <mat-sidenav-content>
    <button mat-raised-button color="primary" (click)="opened = !opened">
      Toggle Opened
    </button>
  </mat-sidenav-content>
</mat-sidenav-container>

Save the files and take a look again to the browser and you should see that initially the sidenav is hidden because we have initialize it to false I click on the button and the sidenav is shown click outside the sidenav and it automatically hides. mat-sidenav-container opened

So this was the first method to show or hide a sidenav before we take a look at the next method I want to quickly show the different modes that can be applied to a sidenav, the mode for a sidenav can be specified using the mode attribute on the <mat-sidenav mode="over"> component, the default mode is over and this is the mode we have seen so far if you go back to the browser you can see that there is no changes from what we have already seen, the Sidenav floats over the Main Content which is covered by a backdrop.

The second possible value for mode attribute is push so I'm going to change over to push <mat-sidenav mode="push"> let's save the file and see how this works in the browser. angular material sidenav modes

When I click on the button the Sidenav appears but this time it pushes the Main Content out of it's way covering it with a backdrop.

The final possible value for mode attribute is side so let's change again from push to side <mat-sidenav mode="side">. sidenav mode

In this mode the Sidenav appears side-by-side with the main content shrinking the main content with to make space for the sidenav content.

So the three possible modes are over, push and side.

Back to opening and closing the sidenav we have seen the first method which is using the opened attribute. The second method to open or close the sidenav is by invoking the open or close methods on the sidenav itself, for this method I'll create a template reference variable on the <mat-sidenav> component that means I'll add #sidenav to that component and create two buttons that will call the open and close methods on this template reference variable.

<mat-sidenav-container>
  <mat-sidenav #sidenav mode="side">Sidenav content</mat-sidenav>
  <mat-sidenav-content>
    <button mat-raised-button color="primary" (click)="sidenav.open()">Open</button>
    <button mat-raised-button color="accent" (click)="sidenav.close()">Close</button>
  </mat-sidenav-content>
</mat-sidenav-container>

Save the file and go to the browser you'll notice that when I click on open button the sidenav opens I click on close button and the sidenav closes so this is the second method to open or close a sidenav in angular material.

Now there is also a third method by toggling the sidenav and calling the toggle() method this is also the approach you might want to take when you have a hamburger icon for example, so let's create another button in the Main Content the text is going to be "Toggle" on click on this button I simply call the toggle() method on the #sidenav template reference variable.

<mat-sidenav-container>
  <mat-sidenav #sidenav mode="side">Sidenav content</mat-sidenav>
  <mat-sidenav-content>
    <button mat-raised-button color="primary" (click)="sidenav.open()">Open</button>
    <button mat-raised-button color="accent" (click)="sidenav.close()">Close</button>
    <button mat-raised-button color="warn" (click)="sidenav.toggle()">Toggle</button>
  </mat-sidenav-content>
</mat-sidenav-container>

angular material sidenav template reference variable If I save and go back to the browser and click on the Toggle button the sidenav opens I click again on Toggle buttons the Sidenav closes.

So these are the 3 ways to open a material sidenav. That is about the Sidenav in angular material.