npm package: @kinect-pro/ngp-radial-menu
Description: A radial menu with a variety of settings for Angular app
Author: Den Kopach
Latest version: 2.0.1

# Angular2 Radial Menu

This project for Angular 2 (currently supported version 9) is a menu with the ability to customize animations and styles.
Demo project [here](https://angular2-pretty-component-demo.herokuapp.com/radial-menu)

|Library version|npm tag|Angular version|
|---|:---:|:---:|
|1.x|ng8|Angular 8|
|2.x|ng9|Angular 9|

## Features
#### Adding your own template
To create a radial menu, you must pass your template to the component. 
Elements can be an icon, text, component... Any item may contain subitems. The number of subitems is not limited.

#### Using combined elements
You can combine different elements in one point (for example, an icon and a signature)

#### Custom styles
You can customize styles to display elements. You can customize "menu-item" class for main items and "sub-item" class for subitems.

#### Custom animation
You can customize the duration, delay and animation type.

## Installation

### How to install
#### With npm
```npm install @kinect-pro/ngp-radial-menu```
#### With yarn
```yarn add @kinect-pro/ngp-radial-menu```

### How to setup
#### Add MenuModule to need module
##### app.module
```
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

import {MenuModule} from '@kinect-pro/ngp-radial-menu';


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    MenuModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
```

#### Add carousel component to need component
##### app.component.html
```
<ngp-radial-menu class="menu-container">
  // Your template must be here
</ngp-radial-menu>
```

## Development server

Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.

## Using
### Set template to radial menu
#### Using custom elements
##### app.component.html
```
<ngp-radial-menu class="menu-container">
    <a class="menu-item" ngpMenuItem>
        <fa-icon [icon]="faAddressCard"></fa-icon>
    </a>
    <a class="menu-item" ngpMenuItem>
        <fa-icon [icon]="faAddressCard"></fa-icon>
    </a>
    <a class="menu-item" ngpMenuItem>
        <fa-icon [icon]="faAddressCard"></fa-icon>
    </a>
</ngp-radial-menu>
```

##### Note: all of menu items must contain `ngpMenuItem` directive for the correct working.
##### Note: in the 'menu-container' class, block sizes and custom styles are specified 

### Set custom options
- isOpenByHover: determines whether to open a menu item on mouseover or not.
- isSymmetrical: determines whether or not the arrangement of elements in the menu is symmetric.
- isClockwiseMovement: determines whether the elements are clockwise or not.
- mainRadius: determines the radius of the elements of the main menu.
- mainRadius: determines the radius of the elements of the submenu.
- animateTime: animation time.
- animatePause: pause time between animations.
- mainStep: step between main menu items.
- subStep: step between submenu items.
- startedDeg: menu start degree (180 degrees is the location of the 12 hour hand).
- animateName: animation name. Must be 'come-in', 'fade-in', 'spin', 'duration-and-fade-in', 'duration-and-come-in'.
- animationType: animation type. Must be 'ease-in', 'ease-out', 'ease-in-out' or valid 'cubic-bezier()'.
 You can create valid curve in generator [here](https://cubic-bezier.com/). Default value is 'ease-out'.

##### app.component.html
```
<ngp-radial-menu [menuConfig]="menuConfig" class="menu-container">
  // template here
</ngp-radial-menu>
```
##### app.component.ts
```
  menuConfig = {
    isOpenByHover: false,
    isSymmetrical: true,
    isClockwiseMovement: true,
    mainRadius: 200,
    subRadius: 140,
    animateTime: 200,
    animatePause: 200,
    subStep: 75,
    mainStep: 150,
    startedDeg: 180,
    animateName: 'fade-in',
    animationType: 'ease-out'
  };
```

## Contact us