ngc-float-button

ngc-float-button

Google Material Floating Action Button, Implementation for Angular v4+

Demo

Installation

First you need to install the npm module:

npm install ngc-float-button --save

Dependencies

Angular Material

Google Material Icons

Angular v4+

Usage

1. You need to add the Google Material icons in your index.html:

    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

Check the Google Material Icons site to see all icons

2. Import the NgcFloatButtonModule:

import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {NgcFloatButtonModule} from 'ngc-float-button';

@NgModule({
    imports: [
        BrowserModule,
        NgcFloatButtonModule
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

SharedModule

If you use a SharedModule that you import in multiple other feature modules, you can export the NgcFloatButtonModule to make sure you don't have to import it in every module.

@NgModule({
    exports: [
        CommonModule,
        NgcFloatButtonModule
    ]
})
export class SharedModule { }

Finally, you can use ngc-float-button in your Angular project.

Sample

The FAB template

    <ngc-float-button icon="add">
        <ngc-float-item-button icon="person_add" content="float item 1"></ngc-float-item-button>
        <ngc-float-item-button icon="gps_fixed" content="float item 2"></ngc-float-item-button>
        <ngc-float-item-button icon="mode_edit" content="float item 3"></ngc-float-item-button>
    </ngc-float-button>

API

@Input properties

The ngc-float-button component has two @Input properties:

[open]="open" and [direction]="direction"

[open] property waiting for BehaviorSubject type, with this you can open or close the FAB dispatching events.

Sample:

    ...
    //our parent component

    // with this our FAB will be started open.
    private open:BehaviorSubject<boolean> = new BehaviorSubject(true);

    ...

    <div>
        <button md-button (click)="open.next(true)">Open</button>
        <button md-button (click)="open.next(false)">Close</button>
    </div>

    <ngc-float-button icon="add" [open]="open">
    ...

[direction] property waiting for string type value that's accepted top, right, bottom, left, remember the [property-binding] is optional but if you need change this property dynamically it's required.

Sample:

    <div>
        <button md-button (click)="direction='top'">Top</button>
        <button md-button (click)="direction='right'">Right</button>
        <button md-button (click)="direction='bottom'">Bottom</button>
        <button md-button (click)="direction='left'">Left</button>
    </div>

    <ngc-float-button icon="add" [direction]="direction">
    ...

@Output property

You can listener events in ngc-float-button subscribing the (events) output.

Sample:

    ...

    output(log) {
        console.log(log);
    }

    ...

    <ngc-float-button (events)="output($event)">
    ...

Customization

If you need change some css property in ngc-float-button you need to use /deep/ selector in parent css component.

More info about customization soon.

CSS animations credits

The css animations were inspired by this