# ngx-circular-menu

> Add unique **circular menus** to your application, similar to the Floating Action Button (FAB) in android. You can add 4 menu items to this menu.

Latest version **0.0.6** (published 2022-01-21) · MIT license · 0 weekly downloads

## Install

```sh
npm install ngx-circular-menu
pnpm add ngx-circular-menu
yarn add ngx-circular-menu
bun add ngx-circular-menu
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.6 |
| Published | 2022-01-21 |
| First published | 2022-01-21 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 209.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Maintainers | monfee |
| Keywords | circular menu, radial menu, fab menu, floating action menu, angular |

## Links

- npm: https://www.npmjs.com/package/ngx-circular-menu
- Repository: https://github.com/evanmonfee/ngx-circular-menu
- Homepage: https://github.com/evanmonfee/ngx-circular-menu#readme
- Issues: https://github.com/evanmonfee/ngx-circular-menu/issues
- npm.io page: https://npm.io/package/ngx-circular-menu

## Dependencies (1)

- [tslib](https://npm.io/package/tslib.md) ^2.0.0

## Alternatives

- [jsforce](https://npm.io/package/jsforce.md) — 851.2K weekly downloads
- [react-native-qrcode-svg](https://npm.io/package/react-native-qrcode-svg.md) — 693.5K weekly downloads
- [@salesforce/plugin-data](https://npm.io/package/@salesforce/plugin-data.md) — 394.9K weekly downloads
- [@backstage/plugin-search-common](https://npm.io/package/@backstage/plugin-search-common.md) — 308.5K weekly downloads
- [@chain-registry/types](https://npm.io/package/@chain-registry/types.md) — 38.4K weekly downloads

## Recent versions

- 0.0.6 (latest) — 2022-01-21
- 0.0.5 — 2022-01-21
- 0.0.4 — 2022-01-21
- 0.0.3 — 2022-01-21
- 0.0.2 — 2022-01-21
- 0.0.1 — 2022-01-21

## README

# NgxCircularMenu

**ngx-circular-menu**: Add unique **circular menus** to your application, similar to the Floating Action Button (FAB) in android. You can add 4 menu items to this menu.


![Radial Menu](https://i.imgur.com/Yab9wFk.png)

![enter image description here](https://i.imgur.com/Vd2klR1.png)

# Installation
### 1. NPM Installation
Now install  `ngx-circular-menu`  via npm:

`npm install ngx-circular-menu`

### 2. Import the library
Once installed you need to import the main module:

```javascript
import { NgxCircularMenuModule } from  'ngx-circular-menu'; <---

 @NgModule({
    declarations: [
    AppComponent,
    ],
    imports: [
    BrowserModule,
    AppRoutingModule,
    NgxCircularMenuModule, <----
    ],
    providers: [],
    bootstrap: [AppComponent]
    })
    export  class AppModule { }
```

## Usage
**1. In the .html file:**
```html
    <lib-ngx-circular-menu  
      [menuItemsModelData]='menuItemsModel'  
      (menuItemOneClick)='goToDashboard()' 
      (menuItemTwoClick)='goToSearch()' 
      (menuItemThreeClick)='goToWishlist()' 
      (menuItemFourClick)='goToLogout()'>
    </lib-ngx-circular-menu>
   ```

**2. In the .ts file:**

```javascript
    menuItemsModel: MenuItemsModel;

    setRadialMenu() {
      this.menuItemsModel = new MenuItemsModel(
      "Dashboard", 'assets/icons/icn_drawdowns.svg',
      "Search", 'assets/icons/icn_search_white.svg',
      "Wishlist", 'assets/icons/icn_to-do-list.svg',
      "Logout", 'assets/icons/logout.svg'
     );
    }
```

**3. Sample component:**
**app-component.html**
```html
    <lib-ngx-circular-menu  
      [menuItemsModelData]='menuItemsModel'  
      (menuItemOneClick)='goToDashboard()' 
      (menuItemTwoClick)='goToSearch()' 
      (menuItemThreeClick)='goToWishlist()' 
      (menuItemFourClick)='goToLogout()'>
    </lib-ngx-circular-menu>
   ```
   
   **app-component.ts**
```javascript
export class AppComponent implements OnInit{

title = 'radial-menu';
menuItemsModel: MenuItemsModel;

ngOnInit(){
this.setRadialMenu();
}

setRadialMenu() {
this.menuItemsModel = new MenuItemsModel(
"Dashboard", 'assets/icons/icn_drawdowns.svg',
"Search", 'assets/icons/icn_search_white.svg',
"Wishlist", 'assets/icons/icn_to-do-list.svg',
"Logout", 'assets/icons/logout.svg'
);
}

goToDashboard() {
console.log('goToDashboard clicked..');
}

goToSearch() {
console.log('goToSearch clicked..');
}

goToWishlist() {
console.log('goToWishlist clicked..');
}

goToLogout() {
console.log('goToLogout clicked..');
}

}
```

## Demo
View the application demo in GITHUB.

[Demo Source](https://github.com/evanmonfee/ngx-circular-menu-demo)

---
_Source: https://npm.io/package/ngx-circular-menu · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._