Angular Material: Adaptive Layouts
Both flexbox CSS and the Angular Material Layout allow web applications to respond to the size of the browser at any given point. No matter what the browser width may be, the web app adjusts its layout sizing accordingly. Combine responsive functionality with media query support and your web applications will have adaptive features to adapt to the width of the browser at a specific points. More than fluidly adjusting the widths and heights of elements, Adaptive applications can change the rendered UX with new positions, new components, and new styles. Angular Material Layout hides the complexities of implementing adaptive features with a singularly unique and simple HTML syntax.
Let’s use the Adaptive extensions of the Angular Material API to hide the SideNav on small devices (like iPhone or Android). We will explore the use of the $mdMedia service to easily lock open the SideNav on larger devices. And we will see how the $mdSideNav service can be used to programmatically close the SideNav after a user is selected.
This course presented by Thomas Burleson and Aaron Frost.
[00:01] Let's make another change to our ngMaterial starter app. We're going to tap into the ngMaterial layout API again, and we're going to use it to automatically hide or show our side nav, depending on the size of the window that the app's loaded in.
[00:15] During the second step of building this app, we got a little bit familiar with the layout and flex APIs. During this step, we're going to get familiar with the $mdMedia API, which allows us to respond to different screen sizes.
[00:30] Let me show you a couple of the options before we start using it. The $mdMedia service recognizes and allows us to tap into all these different sizes, and it changes from one size to another. When you change from one size to another, that's called a break point.
[00:45] The break point today that we're specifically looking at is anything greater than small. The reason we want to look at it is because we want to always show our side nav if we're greater than small. If we are small or smaller, we want to always hide that side nav and require you to click to toggle it back open.
[01:07] Again, we're looking for the break point that is greater than small. The way that you tap into these break points is by using their aliases. Here's the list of their aliases. Again, the one we're looking at is GT-SM for greater than small.
[01:22] The way you use their alias is you can either append it as a suffix to the layout or flex directives, or you can do what we're going to do, which is pass the suffix directly to the $mdMedia services. It's going to return to us a Boolean.
[01:38] It will give us a true if we are greater than small. It'll give us a false if we're not. Let's go ahead and wire that up real quick. We'll come over here to md-is-locked-open, which is what's keeping our nav open all the time. We'll say, "$mdMedia greater than small," and save.
[02:01] Now you can see it's open, so we are greater than small. If we make it a little bit smaller, it responds, and it goes ahead and automatically hides our side nav, which is awesome that we were able to do that with just one change like that. If we grow back out, it shows again.
[02:21] When you look at this, we have a problem, though, because if I want to select a different user, I don't have a way to get that side nav back open. Let's get a menu button up here into the toolbar that I can click on to toggle the side nav open and close.
[02:36] We'll go up to the toolbar, and we'll say, "md-button." We'll give it a menu class. In there, we'll give it an md-icon, because we want that menu icon. We'll give it the md SVG icon in the menu one. Let's go ahead and register it.
[02:54] There it is. You can see our toolbar is stacking these two components. Let's go up to the toolbar, and we'll say, "layout is equal to row." Now they lay out in a row, which is exactly what we wanted them to do.
[03:16] Let's get this click listener wired up, so that when we click, the side nav open and closes. We'll come to our button, and we will say, "ng-click is equal to ul.toggleList." Now toggleList is a method on our controller that doesn't currently do anything.
[03:39] We want it to toggle our side nav open and close. Material design makes this easy by providing us with the $mdSidenav service. It's got a couple functions. The one we're looking for is toggle. We'll say $mdSidenav, and it wants us to select our nav based on the ID of that component.
[03:59] If we look in the template, we look for the ID. We don't have one. It's really easy to give it one. We'll say, "md-component-id is left," because it's our left side nav. We'll make it easy. Now we can come over here, and say, "$mdSidenav, left.toggle."
[04:16] It takes care of all your state for you, so when I click this, it toggles the list open now. If I click off, automatically closes, exactly what we expected it to do. You'll notice that when I select a user, in the background, they're updating.
[04:33] Our list should auto-close. At least, we'd expect it to. Let's get a click listener on the whole list that will also toggle this side nav. We'll come over to our index. On that list, we'll say, "ng-click is equal to ul.toggleList."
[04:53] Now when we click on any of our list items, it goes ahead and closes our list. This is great. We just have one piece left, which is when we go wide enough to not need that media query anymore, you want this menu icon to go away, because it doesn't do anything anymore. It's useless.
[05:16] Let's go ahead and add one attribute, "hide greater than SM." That takes care of it. If we shrink it up, it's back, still works. There we go. It's working. With just these few lines of code, with just these few changes, we're able to get our app to respond to different sizes of screens that our users may be using.