Angular Material: Containers with the Layout API
The Angular Material Layout API wraps the flexbox CSS features with an amazingly easy, powerful HTML markup API. The Layout API hides the complexities of the CSS, is intuitive to use, and eliminates the need for developers to become flexbox experts to implement modern page layouts.
In this lesson we will learn how to use the Angular Material Container components and the Layout API to implement the layouts specified in design wireframe.
This course has been created by Thomas Burleson and Aaron Frost.
[00:01] This is the wireframe for the app that we're trying to build. It's got three main sections, an md-toolbar, an md-sidenav, the md-content over here to the right. Let's go ahead and get these three components onto the page.
[00:15] We'll start by dropping in here. We'll say "md-toolbar." We're going to put an H1 inside of it that says angular material starter. Save it. Looking good. Let's add the next section, which is the md-sidenav. Let's open that up.
[00:39] We'll put in there sidenav. Save. It's closed because we're on such a small screen. On a larger screen, it would remain open. That's one of the features of the sidenav, so we're going to say md is locked open equals true, and that helps us stay open. That's a cool little feature of the sidenav.
[00:55] Now, we're going to say md-content. We're going to give you an idea of content, which we'll use later. Done. We'll say content inside of it so we can see it. Save. Here we go. I want to add a little color to these so that we can see how wide they are and how much space they're taking up, I'm going to go ahead and add a couple styles down here at the bottom.
[01:16] Now that we've done that, let's go ahead and add a class on the sidenav of light blue, and on the content, we'll say class is equal to light green. Cool. They're there. We can see them. You're going to notice, though, that they're not doing what we want them to do. We want them to go side-by-side, and instead they're stacking vertically.
[01:45] They're also not filling up the remaining vertical space of the page down here like we expected them to in the wireframe, so we're going to use two components to fix these problems, two directives from the angular material API, the layout directive and the flex directive.
[02:02] We're going to go ahead and put these two lower pieces inside of a container that we're going to call the container. On this container, we're going to say layout equals row. What that's going to do is it's going to tell its children to lay out in a row.
[02:25] We're going to move these guys now up into it. I think when we save this, they're in a row. This is exactly what we wanted. Great. We still have a problem with the content. It's not flowing out, it's not stretching its legs all the way out to the side like we hoped it would and like we need it to.
[02:42] We're going to use that second directive here. We're going to say, "Hey, md-content, why don't you flex?" He fills the remaining space, which is perfect. That's exactly what we wanted.
[02:54] Now, we need to address the problem of this main DIV not filling the full remaining vertical space. To do that, we're going to tell this element's parent that we want it to layout as a column, which will tell its children to stack vertically. They already were, but we're going to tell the second child, which is our container, to flex.
[03:24] At that point, they take up the remaining space. If we take this full screen, you can see that our sidenav stays on the side, our content's over here, we have our header. Our wireframe is done.