This is a FAB speed dial component for Angular Material (v7+).

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:

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

    <eco-fab-speed-dial-actions>
        <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>
    </eco-fab-speed-dial-actions>
</eco-fab-speed-dial>

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 Travis)
• git tag -a 1.2.3 && git push to publish the lib to npm (via Travis deploy mechanism)

• Change color of the fab buttons on hover/selection
• Make the trigger button change icon when the user open the speed dial (configurable)
• Let the speed dial open a "sheet" of material instead of just mini-fab action buttons

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