[![Build Status](https://github.com/Ecodev/fab-speed-dial/workflows/main/badge.svg)](https://github.com/Ecodev/fab-speed-dial/actions) [![Total Downloads](https://img.shields.io/npm/dt/@ecodev/fab-speed-dial.svg)](https://www.npmjs.com/package/@ecodev/fab


8298.0.14 months ago4 years agoMinified + gzip package size for @ecodev/fab-speed-dial in KB


Angular Material FAB speed dial

Build Status Total Downloads Latest Stable Version License Join the chat at https://gitter.im/Ecodev/fab-speed-dial

This is a FAB speed dial component for Angular Material.

See the component in action on the demo page.


  1. Install the library:
    yarn add @ecodev/fab-speed-dial
  2. In app.module.ts add the following modules to the imports array:
    • MatButtonModule
    • MatIconModule
    • EcoFabSpeedDialModule


The following is an example of a minimal template. Either implement a doAction(), or adapt the bindings to your needs:

    <button mat-fab (click)="doAction('trigger')"><mat-icon>menu</mat-icon></button>

    <button mat-mini-fab (click)="doAction('action1')"><mat-icon>add</mat-icon></button>
    <button mat-mini-fab (click)="doAction('action2')"><mat-icon>edit</mat-icon></button>
    <button mat-mini-fab (click)="doAction('action3')"><mat-icon>search</mat-icon></button>



Property Type Default Description
open boolean false Indicates if this FAB Speed Dial is opened
direction up, down, left or right up The direction to open the action buttons
animationMode fling or scale fling The animation to apply when opening the action buttons
fixed boolean false Indicates if this FAB Speed Dial is fixed (user cannot change the open state on click)


Property Type Default Description
spin boolean false Enables the rotation of the trigger action when the speed dial is opening

Additionally to spin property, add class "spin180" or "spin360" on html content inside of eco-fab-speed-dial-trigger tag to activate rotation on a specific element.

In case of buttons, the icon should rotate not the whole button (box-shadow would rotate too).


The most useful commands for development are:

  • yarn dev to start a development server
  • yarn build-demo to build the demo locally (it will be published automatically by GitHub Actions)
  • git tag -a 1.2.3 && git push to publish the lib to npm (via GitHub Actions release job)

Prior work

This lib was originally based on angular-smd, and its various forks, itself based on AngularJS FAB Speed Dial.

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.