How to Create a Side-Menu for Angular 2 Using Material Design

Angular 2 Material (officially just Angular Material but I wanted to make it clear) provides an implementation of Google’s Material Design on the Angular 2 platform. If you are not familiar with Material Design then you really should visit the Material site. For the purposes of this post, let’s just say that it is a mechanism for building user-interfaces which are attractive, easy to understand and work in the same way across multiple platforms.

Angular 2

Working with Angular 2 Material right now (this post is based on the beta 1 release) is a little challenging. There is a huge amount of power hidden within it but the documentation is not exactly user friendly. In this post, I’m exploring the creation of a side-navigation menu. It should perhaps be said that I’m making the assumption that the reader already understands the basics of both Angular 2 and Angular 2 Material. If not, then perhaps consider the course on Angular 2 which I have developed with Learning Tree.

The picture above illustrates what we are trying to achieve. The toolbar on the page has a menu button which when clicked will show or hide the side-navigation menu. Therefore there are two separate tasks to address:

  1. Creating a menu button
  2. Building a side-menu

As you will see, both of these are made very simple with Angular Material.

The Menu Icon Button

First, let’s look at the menu button. As you would expect, the menu icon will be the standard “burger bar” icon with an accessible text alternative of “Menu”.

The HTML markup is trivial in the extreme:

<button md-icon-button (click)="sidenav.toggle()">
  <md-icon class="md-24" >menu</md-icon>
</button>

There are actually three Material components to this:

  1. In the button element there is an md-icon-button attribute directive – which identifies that the button should be rendered as an icon.
  2. Nested in the button element is the md-icon element – which is used to specify which icon to use.
  3. The md-icon element has a class of md-24 – which specifies the size of the icon in pixels to render (this can be 18,24,36 or 48).

The awesome bit of this is how the Material libraries figure out which icon to use: it uses a ligature! Put simply, it takes the accessible text inside the md-icon element and looks that up in the FontAwesome font. There is also a full list of the standard icons. You don’t have to use these icons as the Icon component allows the use of any SVG based icon via the MdIconRegistry. For our purposes here though, the ligature technique is perfect.

The other thing of interest here is the click event binding: as a quick look at the code suggests, clicking the menu button toggles the side menu.

The Side Menu

Next, we need to look at the implementation of the side menu. To do this, we use another Material component, this time it’s Sidenav. It can be added into the template for a component (typically the top-level application component) with the md-sidenav element.

<md-sidenav #sidenav mode="side" class="app-sidenav">
   <md-nav-list>
       <a md-list-item href="page1.html">Page 1</a>
       <a md-list-item href="page2.html">Page 2</a>
       <a md-list-item href="page3.html">Page 3</a>
   </md-nav-list>
</md-sidenav>

In our example, the Sidenav component has been assigned to a template reference variable called sidenav which was used by the click event handler for the menu button to toggle the state of the side navigation menu.

The example side navigation menu has been created with the help of another Material Component: MdList which is associated with the md-nav-list element. The individual items in the list have then been created by adding the md-list-item directive to the individual <a> elements.

I’ve used hard-coded <a> elements to keep the list simple. In reality, of course, the content of the navigation list would probably have been generated dynamically most likely with a set of [routerLink]’s.

Pulling it all Together

There are a couple more details that we need to resolve:

  • Creating a container for the side-navigation menu
  • Putting the menu button into a toolbar

To display correctly, the Sidenav component needs to be in a container. Which will then cause the content of the Sidenav to be displayed at the side of the screen only when we want it (by calling toggle()). To do this, it is just necessary to modify the template so that the md-sidenav element is nested inside one of the container elements in this case <md-sidenav-layout>.

<md-sidenav-layout >
    <md-sidenav #sidenav mode="side" class="app-sidenav">
    <md-nav-list>
        <a md-list-item href="page1.html">Page 1</a>
        <a md-list-item href="page2.html">Page 2</a>
        <a md-list-item href="page3.html">Page 3</a>
    </md-nav-list>
        </md-sidenav>
        <md-toolbar color="primary">
            <button md-icon-button (click)="sidenav.toggle()">
                <md-icon class="md-24" >menu</md-icon>
            </button>
        </md-toolbar>
    <div class="app-content">
        Example Content area<br><br><br><br><br><br><br>
    </div>
</md-sidenav-layout>

The last little trick was to wrap the button in an md-toolbar element. This creates a toolbar across the top of the page.

Conclusion

That’s really all there is to it. There is no code required in your hosting component at all! Hopefully this gives you a taste of the power of Material in Angular 2.

Type to search blog.learningtree.com

Do you mean "" ?

Sorry, no results were found for your query.

Please check your spelling and try your search again.