Angular Material Toolbar : md-toolbar directive is used to create toolbar in Angular Material. Here in this tutorial we are going to explain how you can create toolbars in Angular Material. You can also use our online editor to edit and run the code online.
Angular Material Toolbar Example
Toolbars are basically used above the content are which displays the title of the page and shows related Action Buttons. Let us first create simple tool bar using md-toolbar directive.
Angular Material Toolbar Example:
<div layout="column" layout-fill="">
<md-toolbar>
<div class="md-toolbar-tools">
<span>My Title</span>
<span flex=""></span>
<md-button>
<i class="material-icons">favorite_border</i>
</md-button>
</div>
</md-toolbar>
<md-content>
This Is dummy Content. You can add your content Here.
</md-content>
</div>
|
| Try It On → |
If You run the above example it will produce the output something like this –