Javatpoint Logo
Javatpoint Logo

Angular Material Fab-Toolbar

<Md-fab-toolbar> is an Angular directive which contains headers, titles, or functions.

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

In Fab-toolbar the md-open attributes is used to control the program. In Fab-Toolbar we have to set the visible direction by using the toolbar md-direction. The component supports left options.


The table lists out the description of attributes of the md-Fab toolbar.

Sr.No Parameter Description
1 *md-direction md-direction is determined by the direction where the toolbar item will appear to the trigger element. It supports left or right directions of toolbar.
2 md-open md-open controls the toolbar which is visible or not.

Single row

A toolbar is placed at the top of the application and contain a single line containing the title of the application.

Multiple rows

The toolbar contain multiple rows at a time. To creating toolbars with multiple rows in Angular content is placing <mat-toolbar-row> elements inside the <mat-toolbar>.

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

Positioning Toolbar Content

The toolbar does not display state of the contents. It gives the full power to the position of the content to the user.

It is accomplished with demonstration:


It shows the md-fab-toolbar directive and its uses.



Angular Material Fab-Toolbar

Youtube For Videos Join Our Youtube Channel: Join Now


Help Others, Please Share

facebook twitter pinterest

Learn Latest Tutorials


Trending Technologies

B.Tech / MCA