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

|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. 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