Angular Material: Using a BottomSheet

[00:01] we're going to add some functionality to our starter app that will allow us to contact each of the users in our list. We'll start by wiring up a button in the top right. When the users click that button, the section will fly in from the bottom, and it will have the user's name, as well as four different ways to contact that user.

[00:20] The section that flies in from the bottom is called the bottom sheet. We'll start by wiring up the button, then, we'll hook up the bottom sheet, and then, we'll do the layout for the items in the bottom sheet.

[00:32] Starting with the button, we come over here and just say md button. Let's go ahead and add a share class to it. In that button, we're going to use an icon. On each icon, we say "md svg icon." We're going to use the share icon.

[00:50] We haven't actually defined the share icon, let's just come down here and define it real quick, md icon provider.icon. It's the share icon. Let's point it at the share icon, so svg shared isdg. It's 24 pixels. Perfect. We can see it show up here in the top right.

[01:14] When we click it, it's got that rear pulley that I don't really want. I'm going to say "md no ink," get rid of it. I want to point out one thing the Angular material's doing for us. By bringing in ng aria, it's going to give us some warnings.

[01:34] We have a button here that doesn't have any text in it. Ng aria, if you have a button with text in it, it will set the aria label equal to whatever that text is inside that button. But this arrow button doesn't have any text inside, it doesn't know how to help out the screen readers to read any label.

[01:51] It's giving us a warning, telling us we need to add our own aria label to this piece. We'll say aria label is equal to share. Now, any of our users that are using a screen reader can also interact with this button, as well.

[02:06] When we click this, we want it to do something. We want that bottom section to fly in. We'll just go ahead, and for now, add this click listener. We'll say ng click is equal to ul.share. When we call share, we'll pass in the selected user.

[02:26] So far in this starter app, we've use one of the two kinds of components in Angular material which are declarative components. We declare them in our template, and then, we're able to use them. That's what we've used so far to build our app. But there's a second kind, which are programmatic components. You interact with these components through a programmatic API.

[02:46] This bottom sheet is one of those programmatic components. The way you interact with the bottom sheet is you inject it into your controller. You can see in our user controller we're injecting it. Then down in our share method, which we call on click, let's go ahead and interact with the md bottom sheet.

[03:04] Let's say "md bottom sheet.show." That is going to show the bottom sheet, but we need to give it a few pieces of config. The first one is the controller. We're just going to give it this in-line controller we have down here. Then, we don't want to refer to controller by that long name in the template, so we'll say controller as vm.

[03:29] Now on the template, we can just call vm. We need to define the template, we'll say template URL is equal to bottom sheet.HTML which currently just has the word help in it.

[03:42] Then, the last thing is we need to give it a parent, which is where we want it to attach the bottom sheet to. We'll do an Angular element selector which returns Angular element. Then, we'll say document.query selector.

[03:56] The section we want to append it to is to the content area, which is this left area over here. When we click this, we should see the bottom sheet pop up over here.

[04:09] Notice it has a black overlay that only covers the content area. We could change this to body, and then when we click the button, it will actually put the bottom sheet on the whole body with this overlay covering the whole body. If that's what you want to do, that's how you can use it. But we want it to just be over the content section, so we'll just use content there.

[04:33] Now that we've wired up the bottom section, let's go ahead and add the layout to this bottom sheet. Notice in our controller, we've got a user which we'll use to put their name on, just like our mock has, and then, we'll layout these four buttons.

[04:50] Notice in our controller we have four items, each one with a name and with an icon URL. Let's go ahead and set this out in our bottom sheet template. Get rid of this hello.

[05:02] We'll say "md sub-header." In the sub-header, we'll say contact. We'll do span.name. We're going to template in there vm user name. Check that out, make sure it's working. Perfect, just like we wanted.

[05:20] Now, let's go ahead and make a list with each of those four buttons from the design. We'll say md list. In the list, you put an item. We're going to ng repeat over these four items in our controller. We'll say ng repeat equals item in vm.items. Perfect.

[05:40] If you remember, each of those pieces is a button. Let's go ahead and add a button. We'll say "md button." On the button, we'll go ahead, and inside of it, we'll put an icon. On the icon, we're going to say md icon source equal to item.iconURL, which came from our controller. We've got the icons loading.

[06:12] Let's go ahead and add the name of each button. We'll say "item.name." We open our bottom sheet now. Now, it's looking good. This is actually exactly what we wanted.

[06:25] The last thing we need to do is we need to have something happen when we click on it. Let's add a click listener for each of these buttons, ng click is equal to vm.perform action. Our action that we're going to have it perform, if you look over at the controller, our user sheet controller, perform action is just going to hide the bottom sheet.

[06:51] When we open this and we click one of these buttons, the bottom sheet hides. Our starter app now has a bottom sheet allowing us to contact each of the users.