ngx-float-button


Google Material Floating Action Button,
Implementation for Angular v7+.

This project was based on ngc-float-button

Demo

Access a demo here or download this project and execute: yarn && yarn start or npm install && npm run start to self server it.

Installation

First, you need to install the npm module:

``sh
npm install ngx-float-button --save
`

Dependencies

#### Google Material Icons

#### Angular Material >= 7

#### Angular >= 7

Usage

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

##### The Google Material Icons is required by Angular Material component

`HTML

`

Check the Google Material Icons site to see all icons

#### 2. Import the ngxFloatButtonModule in your project:

`ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { NgxFloatButtonModule } from 'ngx-float-button';

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

##### SharedModule

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

`ts
@NgModule({
exports: [CommonModule, NgxFloatButtonModule]
})
export class SharedModule {}
`

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

Sample

The FAB template

`HTML





`

API

#### @Input properties

ngx-float-button properties:

- icon property expects for icon_name listed in Google Material Icons site.

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

- disabled property expects a boolean to toggle if a button is clickable. Defaults to false.

- color property define the background color and expects a background:{value} valid value. Defaults to #dd0031.

- direction property expects for string value type value that's accepted top, right, bottom, left. Defaults to top

- spaceBetweenButtons - property expects a valid number value in px to define the space between each ngx-float-item-button, Defaults to 55

Sample: [open]

`Typescript
...
//our parent component

// with 'true' our FAB will be started open.
public open:BehaviorSubject = new BehaviorSubject(true); // true is the initial state of FAB

...
`

`HTML



...
`

Sample: [direction]

`HTML



...
`

ngx-float-item-button properties:

- icon property expects for icon_name listed in Google Material Icons site.
- color property define the background color and expects a background:{value} valid value. Defaults to white.
- disabled property expects a boolean to toggle if a button is clickable. Defaults to false.
- content property expects string value to show additional text in ngx-float-item-button

#### @Output property

You can listen the all events emitted by ngx-float-button subscribing in the (events) observable output.

Sample:

`Typescript
...

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

...
`

`HTML

...
`

Customization

If you need change some css property in ngx-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`