height="256px" width="256px" style="text-align: center;"
src="https://cdn.jsdelivr.net/gh/angular-material-extensions/fab-menu@master/assets/angular-material-extensions-logo.svg">

@angular-material-extensions/fab-menu - Angular Material component that allow users to select a country or nationality with an autocomplete feature


src="https://raw.githubusercontent.com/angular-material-extensions/fab-menu/HEAD/assets/v1/ex1.gif">

src="https://raw.githubusercontent.com/angular-material-extensions/fab-menu/HEAD/assets/v1/ex2.gif">

Built by and for developers :heart:

Do you have any question or suggestion ? Please do not hesitate to contact us!
Alternatively, provide a PR | open an appropriate issue here

If you like this project, support angular-material-extensions
by starring :star: and sharing it :loudspeaker:

Table of Contents

- Demo
- Components
- Dependencies
- Installation
- API
- Usage
- Run Demo App Locally
- Other Angular Libraries
- Support
- License

Demo

View all the directives and components in action at https://angular-material-extensions.github.io/fab-menu

Library's components

- used to display the main component

---

Dependencies

* Angular

---

Installation

1. Install via ng add. (Recommended)

If Angular Material Design is not setup, just run ng add @angular/material learn more

Now add the library via the angular schematics
``shell
ng add @angular-material-extensions/fab-menu
`

2. Install via npm. (Alternative)

Now install @angular-material-extensions/fab-menu via:
`shell
npm install --save @angular-material-extensions/fab-menu
`




$3

If you installed the library via angular schematics, you can skip this step

Once installed you need to import the main module:
`js
import { MatFabMenuModule } from '@angular-material-extensions/fab-menu';
`

`typescript
import { MatFabMenuModule } from '@angular-material-extensions/fab-menu';

@NgModule({
declarations: [AppComponent, ...],
imports: [MatFabMenuModule, ...],
bootstrap: [AppComponent]
})
export class AppModule {
}
`

Other modules in your application like for lazy loading import MatSelectCountryModule into your feature module:




API

$3

$3

| option | bind | type | default | description |
|:-------------------|:--------:|:------:|:------------:|:-------------------------------------------------------------------------------------------------|
| fabButtons | Input() | MatFabMenu[] | - | array of floating actions button as menu to render
| icon | Input() | string | add | material icon string e.g: home, mail, phone see more
| direction | Input() | MatFabMenuDirection | top | the direction of buttons: 'top' | 'bottom' | 'left' | 'right';
| color | Input() | ThemePalette | accent | the color of the main fab: primary, accent or warn
| isActive | Input() | boolean | false | Whether the component is active
| disabled | Input() | boolean | false | Whether the component is disabled
| closeAfterSelection | Input() | boolean | true | Close after selecting a fab menu item
| onFabMenuItemSelected | Output() | EventEmitter | - | emits the selected button by id

$3

`typescript
@ViewChild('matFabMenu', { static: false }) matFabMenu: MatFabMenu;
`

toggle() will toggle the isActive property

Important interfaces or type

`typescript

import {ThemePalette, TooltipPosition} from '@angular/material';

interface MatFabMenu {
id: string | number;
icon?: string; // please use either icon or imgUrl
iconColor?: ThemePalette;
imgUrl?: string; // please use either icon or imgUrl
tooltip?: string;
tooltipPosition?: TooltipPosition;
color?: ThemePalette;
}

type MatFabMenuDirection = 'top' | 'bottom' | 'left' | 'right';
`




Usage

`html
[fabButtons]="fabButtonsRandom">


[fabButtons]="fabButtonsRandom">


`

`typescript
import {MatFabMenu} from '@angular-material-extensions/fab-menu';

fabButtonsRandom: MatFabMenu[] = [
{
id: 1,
icon: 'create'
},
{
id: 2,
icon: 'mail'
},
{
id: 3,
icon: 'file_copy'
},
{
id: 4,
icon: 'phone'
},
];
`

try to use your own svg instead of material icons:

`typescript
import {MatFabMenu} from '@angular-material-extensions/fab-menu';

fabCountries: MatFabMenu[] = [
{
id: 1,
imgUrl: 'assets/countrys-flags/svg/canada.svg'
},
{
id: 2,
imgUrl: 'assets/countrys-flags/svg/germany.svg'
},
{
id: 3,
imgUrl: 'assets/countrys-flags/svg/france.svg'
},
{
id: 4,
imgUrl: 'assets/countrys-flags/svg/lebanon.svg'
},
];
`

`html
[fabButtons]="fabButtonsRandom">

`


src="https://raw.githubusercontent.com/angular-material-extensions/fab-menu/HEAD/assets/v1/top.png">


`html
direction="bottom"
[fabButtons]="fabButtonsRandom">

`


src="https://raw.githubusercontent.com/angular-material-extensions/fab-menu/HEAD/assets/v1/bottom.png">


`html
direction="left"
[fabButtons]="fabButtonsRandom">

`


src="https://raw.githubusercontent.com/angular-material-extensions/fab-menu/HEAD/assets/v1/left.png">


`html
direction="right"
[fabButtons]="fabButtonsRandom">

`


src="https://raw.githubusercontent.com/angular-material-extensions/fab-menu/HEAD/assets/v1/right.png">


$3

Build the library

after installing the dependencies with npm i

`bash
$ npm run build:lib
`

Serve the demo app

`bash
$ npm start
``

Other Angular Libraries

- ngx-auth-firebaseui
- ngx-linkifyjs
- @angular-material-extensions/password-strength
- @angular-material-extensions/google-maps-autocomplete
- @angular-material-extensions/link-preview
- @angular-material-extensions/select-country
- @angular-material-extensions/pages
- @angular-material-extensions/select-country
- @angular-material-extensions/contacts

---

Support

+ Drop an email to: Anthony Nahas
+ or open an appropriate issue
+ let us chat on Gitter

Built by and for developers :heart: we will help you :punch:

---

Who is using ngx-mailto? Awesome apps?

1. Nahaus.de

Are you missing your project or you app? PR me to publish it on the README

!jetbrains logo

This project is supported by jetbrains with 1 ALL PRODUCTS PACK OS LICENSE incl. webstorm

---

License

Copyright (c) 2019-2022 Anthony Nahas. Licensed under the MIT License (MIT)