Learn Material Design in Angular. App bars

While navigation drawers offer a way to move between top-level pages, app bars provide the actions, navigation, and information relevant to your current context. Popular on mobile devices, the app bar should always be visible and in the same position to increase familiarity.

For desktop, the app bar should be on top of the screen. For mobile, it’s more common to use the bottom of the screen to emulate the look of a native app. A contextual action bar is another form of app bar. The contextual action bar replaces the app bar and provides additional information such as undo, share, or delete.

The contextual app bar usually disappears or is removed when it’s dismissed. Typically, you would lay out your app bar as follows, your navigation menu, sometimes called the hamburger icon, is on the left followed by the page title and then the contextual actions are right-aligned.

Also learn Node js design patterns

If you need additional icons, you can add an overflow menu which looks like three dots vertically stacked. Overflow menus are always the rightmost item on your app bar. The title of your app bar can either be the name of the current screen, the module, or the name of app itself.

For our app, we want to focus on usability, so having the branding visible on every single page is a tad indulgent. Although the marketing department will be mad at me, I’m going to use the app bar to display the name of our current module. Now let’s go ahead and create our three modules now. Before we can add an app bar to our CMS application, we need to create three feature modules with routing for orders, customers, and messages. We’re going to create the default components for each module. We’re going to update our routing instructions to lazy load the modules when necessary. We’re going to install the Toolbar module from Angular Material which represents our app bar.

And finally we’re wire up the UI to have a toolbar. Let’s get going and create those modules. To create our modules from the terminal, I’m going to type ng generate module orders –routing to include routing, and then I’ll hit Up and Backspace. And let’s go ahead and replace orders, and then I’ll create the customers module. And we’ll do it one more time for messages. Now that we have our three modules, our feature modules, we want to create a default component for each one.

I’m going to ng generate again, but this time in component called customers/customer-list. And this time I’m going to go back to customers, and we’re going to do the same thing for orders creating an order list. And then one last time for messages, create a message list. Now that we’ve created our three feature modules and our default components, we need to update our routing instructions.

To do that I’m going to scroll up to my application and click on the app folder, and I’m going to hit the plus icon to get a new file. I’m going to create a file called app.routing.module.ts. Now I’ve would have gotten this for free had I added the –routing flag when I created my app, but I didn’t do it. So we’ll just do it ourselves here. It’s not a big deal. So let’s go ahead and import NgModule on line one from @angular/core. And let’s go ahead and define that NgModule up here export class AppRoutingModule.

We’ve defined that. Now we can go ahead and import the RouterModule as well as the Routes class from angular/router. Now let’s define some routes. On line four const routes, I’ve typed Routes equals array. And we’re going to create a structure in here which is going to be our first route. We want to lazy load the customers, so path equals customers. LoadChildren which is our command to lazy load that module when needed. Customer/customers.module#CustomersModule. And I’m going to add a comma on line eight.

Let’s copy this and paste it two more times. Now we’ll replace the word customers on line 10 with orders. And we’ll place on line 11 orders/orders, and now this is the OrdersModule. Line 14 is going to be messages. I’ll copy that line going into 15, messages/messages MessagesModule. And we’ll add the default path, one more structure inside of here which is going to be path empty, or default, redirectTo nowhere, pathMatch quotes full.

So we’ve defined our routed paths. Now inside of NgModule line 24, let’s add some curly braces in here. And we’re going to set import the RouterModule.forRoot our routes. And on line 26, we’re going to say exports RouterModule itself. We’re going to export that RouterModule. Now I’ve defined my imports and my exports, and this error here will go away.

And you see what I’ve done. I’ve said customers now goes to the CustomersModule. Orders goes tot the OrdersModule. Messages goes to the MessagesModule. These are our feature modules. Next, we need to go to our app.module and actually import this. So on line nine, I’m going to go down and make a space. And let’s just go ahead and add routing here on line 10. And we’re going to import AppRoutingModule from app-routing.module. Now, I can just simply copy this, and I’m going to go ahead and import this into our imports section.

And I’m going to separate the Material stuff on line 22. If you want to, you don’t have to do that. I’ll paste my AppRoutingModule here. Now, there’s one more thing I have to do. If I actually open up these modules we’ve created, like the customers.module, you see that they’ve actually assigned my default component and put it in here which is great. The only thing we’re missing is the actual routing instructions. So now if I go to the customer-routing.module, you see I’ve got no routes in here. Well I want to say that my default route goes to my default component. That’s easy enough to do.

We just did it, so we’re going to say when path on line six, don’t forget those curly braces, empty, component equals CustomerListComponent. And I’m going to import that component obviously, so I’ll go ahead and import the CustomerListComponent from customer-list/customer-list.component. And that looks pretty good, so let’s go ahead now and copy those lines from three to 10. And we’ll do the same thing for messages in the messages.routing module.

I’ll go ahead and replace lines four and three and paste. And then I’ll just go ahead and change these to the MessagesListComponent, or its actually MessageListComponent, message, message. I like to use plural for the module names but then use singular for the components. Otherwise, you have messages lists, and it doesn’t really make a whole lot of sense. I’ve added that route, and lastly let’s go to our orders. Let’s go ahead and copy lines 10 to three again, and we’ll go to the orders-routing.module. And I’ll replace four and three with this.

And we’ll call this the OrderListComponent. Replace message with order, order, and we’ll go ahead and say the default goes to the OrderListComponent. Now everything in our app seems to be working. Let’s try and run it and see if we run into any problems. This tends to be a lot of trial-and-error. You might copy something wrong or get a typo in here. Just do it again, rewind this video if you have to just to make sure you got everything right. But here’s what we see. I’ve got page with no errors which is good.

But I have no way to go between modules. So let’s go ahead and add three buttons very easily just to navigate between them. I’ll Command + P to app.component.html, and on line three you can see I just had the word Menu. We’ll get rid of that. Let’s add a button here, and we’re going to use the routerLink directive here. We’re going to say this ones going to go to customers. We’ll call it Customers. Add two new lines here, customers, orders, orders, and finally messages, messages.

We’ll make this look a little bit nicer in a second, but let’s just see if we can get this to work. Now, I do know I need one more thing, so I’ll go ahead and click on it. And we’ll get an error. We’ll just see that error just in case you get this error, too. I’ll click on Customers. Nothing happens. Well, I need a router outlet. Routing requires that I have some place for the routing content to go. So right here below button on line 11, let’s go ahead and put our router-outlet here. Refresh that page. Order-list works! You see I’ve been defaulted to the orders component. Let’s just make sure.

Customer-list works! And messages-list works! So our app and our routing is working correctly. Now, let’s add our app bar on the top and clean this up a little bit. To improve the look of our navigation, let’s go back to line three, and I’m going to add color=”primary” and a directive called mat-button here. Copy that and paste it inside both of these. And then I’m going to Command + P to app.component.css, and let’s add some CSS as well to clean this up.

I’m going to go ahead and say that I want my container space mat-drawer .mat-button. And we’re going to change this to display:block:. Width equals 100%. Text-align equals left. And I see up here that I made a mistake earlier. On line 11, I duplicated that. Let’s go ahead and fix that. I don’t even want to have these paddings. Let’s set that min-width to 200 pixels on line 10. And let’s add a spacer which isn’t on our page yet, but we will add it in just a second.

So, flex, flex one and auto. Let’s save that. I never stopped the application, so it’s still running. So I should be able to see the change immediately if just Tab over. And hey, look it, I’ve got a nice side nav now that actually looks like something actually usable. I think we’re ready to install our app bars. So let’s go back to our application. Command + P app.module.ts. Let’s go ahead and import that now. We need the actual component. That component is called import { MatToolbarModule } from ‘@angular/material/toolbar’.

And all this is on line nine. I’m going to copy that on line nine and go down to my imports from Material components. And again I recommend keeping all these together since you have to import them one at a time. We’ll save that. And I’ll Command + P back to app.component.html. You see how handy that Command + P is. I use it all the time. Returning to the app.component.html, let’s go ahead and add our app bar right now. So, right now I just have this lone button sitting up here. Let’s improve this.

I’m going to go ahead and create a mat-toolbar on line eight. And I’m going to set the color equal to primary. And then I’m going to make a mat-toolbar row inside here. And I’m going to take my button from lines 13, 15 and cut and paste that into here. And I can go ahead and format this. If you have the CSS Formatter, you can format that document. And then just below the button, I’m going to go ahead and add a span called Title, a span with class=”spacer” on line 15.

And I’m going to just add an icon for now just as sort of a place holder. And we’ll just use the favorite icon. Remember that’s just mat-icon and put the text in the middle that says favorite. And we should see our app bar in our application. Let’s take a look. And there it is. I didn’t even have to relaunch the application or anything. I actually have my nav bar now with my contextual title. I’ve got my contextual actions on the right. And I’ve got a nice slide-out nav bar which let’s me switch between modules. And we’re ready to move on to our next video.

Leave a Reply

Notify of