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.
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:
As you will see, both of these are made very simple with Angular Material.
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:
There are actually three Material components to this:
buttonelement there is an
md-icon-buttonattribute directive – which identifies that the button should be rendered as an icon.
buttonelement is the
md-icon element– which is used to specify which icon to use.
md-iconelement 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.
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
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
There are a couple more details that we need to resolve:
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>.
The last little trick was to wrap the button in an
md-toolbar element. This creates a toolbar across the top of the page.
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.