Material Design Components For Angular

Part 3: Navigation

Subscribe On YouTube

DemoCode

This is the third part of the Angular Material series on CodingTheSmartWay.com. In this part we’ll be focusing on Navigation elements like Menu, Sidebar and Toolbar. Of course this third part assumes that you’re familiar with the Angular Material library in general and that you know how to setup an Angular project and install the Angular Material library in that project. If you’re new to Angular Material please first take a look at the first part of this series: Angular Material – Part 1 Introduction.

If you want to learn about Angular Material Dialogs, Tooltips and SnackBars you should also check out the second part.

Let’s get started with part three. The following steps assume that you have already a new Angular 4 project set up and included the Angular Material library.

Menu

To demonstrate the usage of menu elements let’s first add a new component to the project by using the Angular CLI:

$ ng g component menudemo

Next we need to import MdMenuModule (and a few other Angular Material modules) in app.module.ts. Add the following import statement:

import { MdMenuModule, MdButtonModule, MdIconModule, MdCardModule } from '@angular/material';

Also add the modules to the imports array of @NgModule:

imports: [ BrowserModule, BrowserAnimationsModule, MdMenuModule, MdButtonModule, MdIconModule, MdCardModule ],

Now we’re ready to make use of menu components in our application. Open file menudemo.component.html and insert the following code:

<md-card> <md-card-title> Angular Material Menu Demo </md-card-title> <md-card-content> <button md-raised-button color="primary" [mdMenuTriggerFor]="menu"> Open Menu </button> <md-menu #menu="mdMenu"> <button md-menu-item> <md-icon>settings</md-icon> <span>Settings</span> </button> <button md-menu-item disabled> <md-icon>voicemail</md-icon> <span>Check voicemail</span> </button> <button md-menu-item> <md-icon>notifications_off</md-icon> <span>Disable alerts</span> </button> </md-menu> </md-card-content> </md-card>

Here we’re making use of several Angular Material components. The top level element is a md-card element which contains two child elements: md-card-title and md-card-content. The most important code excerpt can be found within the md-card-content element.

First a button is included. The button is displayed in material design by attaching the md-raised-button directive to the element. If the user clicks on this button a menu should be displayed. This is achieved by using the mdMenuTriggerFor directive and assigning a string value. This value must be the name of the template variable of the menu which should be displayed by clicking on the button. In our case we’re assigning the value menu.

Next the menu is created by using the md-menu element. By adding #menu=”mdMenu” to the element the menu template variable is created. The menu consists of three menu items. Each item is added to the template by using a button element and adding the md-menu-item directive to the button element. The md-icon element is used to display an icon next to the menu item text.

To include MenuDemoComponent in the output of our application you need to add the app-menudemo element in app.component.html:

<div> <app-menudemo></app-menudemo> </div>

Now the result in the browser should correspond to the following screenshot:

Clicking on the Open Menu button opens the menu:



Nested Menus

It’s also possible to implement nested menus. This means that a md-menu-item element opens another sub-menu. To implement a nested menu in our sample application just add [mdMenuTriggerFor]="subMenu" to one of the menu items we’ve defined so far:

<button md-menu-item [mdMenuTriggerFor]="subMenu"> <md-icon>settings</md-icon> <span>Settings</span> </button>

Now you need to add the definition of subMenu by included another md-menu element in the template code:

<md-menu #subMenu="mdMenu"> <button md-menu-item>General</button> <button md-menu-item>Display</button> <button md-menu-item>Profile˚</button> </md-menu>

If you now click on the Settings item in the root menu the sub-menu opens up:



Sidenav

Next, let’s take a look at the Sidenav element. Sidenav is part of the Angular Material library and makes it possible to display a panel next or beside some primary content. To demonstrate the usage of Sidenav let’s create a new component first by executing the following command in our project directory:

$ ng g component sidenavdemo

To use the sidenav functionality within our application we need to import MdSidenavModule in app.module.ts:

import { MdMenuModule, MdButtonModule, MdIconModule, MdCardModule, MdSidenavModule } from '@angular/material';

Add MdSidenavModule to the imports array as well:

imports: [ BrowserModule, BrowserAnimationsModule, MdMenuModule, MdButtonModule, MdIconModule, MdCardModule, MdSidenavModule ],

The Sidenav element is included in the template code in file sidenavdemo.component.html as you can see in the following:

<md-card class="demo-panel"> <md-card-title> Angular Material Sidenav Demo </md-card-title> <md-card-content> <md-sidenav-container class="example-container"> <md-sidenav #sidenav class="example-sidenav"> Sidenav content goes here! </md-sidenav> <div class="example-sidenav-content"> <button type="button" md-button (click)="sidenav.open()"> Open Sidenav </button> </div> </md-sidenav-container> </md-card-content> </md-card>

A md-sidenav-conatiner element is used and contains two child elements. The first child is a md-sidenav element. This element contains the content which should be displayed in the sidenav. By adding #sidenav to the element we’re defining a template variable which contains a reference of the sidenav element.

The second child is a div element containing a button. The click event of this button is classing the open method of the sidenav object. By executing this method the sidenav is displayed within the md-sidenav-container element.

The example from above makes use of custom CSS classes like example-container, example-sidenav and example-sidenav-content. Add the following CSS code in file sidenavdemo.component.css:

.example-container { width: 100%; height: 300px; border: 1px solid rgba(111, 111, 111, 0.50); } .example-sidenav-content { display: flex; height: 100%; align-items: center; justify-content: center; } .example-sidenav { padding: 20px; } .demo-panel { margin: 10px; }

In the last step you need to include the new component in the template of AppComponent in file app.component.html:

<div> <app-menudemo></app-menudemo> <app-sidenavdemo></app-sidenavdemo> </div>

The result should look like the following:

If you now click on button Open Sidenav the sidenav area becomes visible:

Sidenav Modes

There are three different ways of rendering a sidenav which can be set by using the mode property. This property can be set to three different values:

over : The sidenav area floats over the primary content

: The sidenav area floats over the primary content push : The primary content is pushed out of the way

: The primary content is pushed out of the way side: The sidebar is displayed side-by-side with the primary content

The default displayed mode of a sidebar is over. If you want to change the mode (e.g. to push) you need to change the code as follows:

<md-sidenav #sidenav class="example-sidenav" mode="push"> Sidenav content goes here! </md-sidenav>

Toolbar

The last navigation element of the Angular Material library which we’d like to include is the toolbar element. First import MdToolbarModule in AppModule:

import { MdToolbarModule } from '@angular/material';

Add it to the imports array of @NgModule as well:

imports: [ BrowserModule, BrowserAnimationsModule, MdMenuModule, MdButtonModule, MdIconModule, MdCardModule, MdSidenavModule, MdToolbarModule ],

A new component is created:

$ ng g component toolbardemo

and the following template code is inserted into toolbardemo.component.html:

<md-card class="demo-panel"> <md-card-title> Angular Material Sidenav Demo </md-card-title> <md-card-content> <md-toolbar color="primary"> <span>First Row</span> <md-toolbar-row> <span>Second Row</span> <span class="toolbar-spacer"></span> <md-icon class="toolbar-icon">favorite</md-icon> </md-toolbar-row> </md-toolbar> </md-card-content> </md-card>

The md-toolbar element is used to include a toolbar. The toolbar consists of two rows. The first row consists of one span element containing the text “First Row”. The second row is implemented by using the md-toolbar-row element. This row contains three elements. A span element with text, a span element which get’s assigned the CSS class toolbar spacer and a md-icon element to display the favorite icon. The corresponding CSS code in file toolbardemo.component.css can be seen in the following:

.demo-panel { margin: 10px 0px; } .toolbar-icon { padding: 0px 30px; } .toolbar-spacer { flex: 1 1 auto; }

Finally add the app-toolbardemo element to the template code of app.component.html:

<div> <app-menudemo></app-menudemo> <app-sidenavdemo></app-sidenavdemo> <app-toolbardemo></app-toolbardemo> </div>

The result should now look like the following: