Home » Angular Material Feb-Toolbar

Angular Material Feb-Toolbar

by Online Tutorials Library

Angular Material Feb-Toolbar

The <md-fab-toolbar> is an Angular directive contains the headers, titles, or actions.

It is used to show the toolbar of elements or buttons for quick use of common functions. You can use the tab toolbar with a trigger.

You can use the md-open attribute to control the program openly. You can set the direction that appears using the toolbar md-direction quality. This component currently supports left and appropriate options.


The below table lists out the description of many attributes of the md-fab-toolbar.

Sr.No Parameter Description
1 *md-direction It determines from the direction where the toolbar items will appear relative to the trigger element. It supports left or right directions.
2 md-open It controls programmatically whether or not the toolbar is visible.

Single row

In most cases, a toolbar will be placed at the top of your application and will contain only a single line that contains the title of your application.

Multiple rows

Material design specifications describe that the toolbar may also contain multiple rows. Creating toolbars with multiple rows in angular content is done by placing <mat-toolbar-row> elements inside <mat-toolbar>.

Note: Placing content outside a <mat-toolbar-row> where multiple rows are specified is not supported.

Positioning toolbar content

The toolbar does not display any status of its content. It gives the user full power to position the content as it suits their application.

It can be easily accomplished with performance:


The example shows the use of md-fab-toolbar directive and the uses of toolbar.



Angular Material Feb-Toolbar

You may also like