Angular Material Toolbars

The Angular Material Toolbar is a great component used primarily for headers and navigation and to give your Angular application a more professional look.

This tutorial will show how you can easily create good-looking toolbars using Angular Material. Keep on scrolling to find out how you can easily improve the user experience of your website with Angular Material toolbars.

What Is Angular Material Toolbar

The toolbar is a directive in Angular Material. It’s defined in your HTML template as mat-toolbar, like this:

<mat-toolbar color="primary">
  <span>My Toolbar</span>
</mat-toolbar>

Here’s what it looks like:

You can add content in between the mat-toolbar tags, just as you would normally do in HTML. You can add text, buttons, icons, and more components which may suit your application needs.

Angular Material mat-toolbar Example

So, we have given you a brief explanation of the Angular Material toolbar. Next up, we’ll go through an example of what you can accomplish with the Angular Material toolbar and how you can customize it.

It is very easy to create a basic toolbar using Angular Material. You only need to add mat-toolbar to your HTML. Inside the toolbar element, you’re free to add whatever component or element you want to use.

Here’s an example where we’ve created a toolbar containing a clickable menu icon, a title, and icon buttons for liking and sharing the webpage:

<mat-toolbar>
   <button mat-icon-button>
    <mat-icon>menu</mat-icon>
  </button>
  <span>This is a cool toolbar</span>
  <span class="space-placeholder"></span>
  <button mat-icon-button>
    <mat-icon>thumb_up</mat-icon>
  </button>
  <button mat-icon-button>
   <mat-icon>share</mat-icon>
 </button>
</mat-toolbar>

The CSS class, space-placeholder, is defined like this:

.space-placeholder {
  flex: 1 1 auto;
}

And here’s what it all looks like:

Now you know how to create a cool-looking toolbar using Angular Material.

Conclusion

There’s not much to cover about toolbars in Angular Material. They’re easy to create and you can easily customize their styling to how you want them to look.

This was a very short tutorial and hopefully, you enjoyed following it. Are you interested in our other Angular Material tutorials? Then, check out our full list of Angular Material tutorials here.