Google Material Float Button - Implementation for Angular v7+
npm install ngx-float-button

Google Material Floating Action Button,
Implementation for Angular v7+.
This project was based on ngc-float-button
Access a demo here or download this project and execute: yarn && yarn start or npm install && npm run start to self server it.
First, you need to install the npm module:
``sh`
npm install ngx-float-button --save
#### Google Material Icons
#### Angular Material >= 7
#### Angular >= 7
#### 1. You need to add the Google Material icons in your index.html:
##### The Google Material Icons is required by Angular Material
`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.
The FAB template
`HTML`
#### @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
...
`
`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`
...
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.