angular-pie v0.2.1

Angular Pie

Installation

npm i angular-pie

Usage

Import the AngularPieComponent to app.modules.ts.

import { AngularPieComponent } from 'angular-pie';

@NgModule({
  declarations: [... , AngularPieComponent],
})

Add <lib-angular-pie></lib-angular-pie> to the app.component.html, then add a mousedown event to call the menu.

<div (mousedown)="callPie($event)" [style.width.px]="'100%'" [style.height.px]="'100%'">
  <lib-angular-pie></lib-angular-pie>
</div>

Import the AngularPieService to the app.component.ts, then create a call function, add the pie slices and options.

import { Component } from '@angular/core';
import { AngularPieService, PieOptions, PieSlice } from 'angular-pie';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.sass']
})
export class AppComponent {
    pieSlices: PieSlice[] = [{ title: 'Slice 1' }, { title: 'Slice 2' }, { title: 'Slice 3' }, { title: 'Slice 4' }];
    pieOptions: PieOptions = {};
    constructor(pie: AngularPieService) {}

    callPieMenu(event: MouseEvent) {

        this.pie.call(event: MouseEvent, this.pieSlices: PieSlice[], this.pieOptions: PieOptions);
    }
}

Slice Functions

Adding functions to a slice is simple, create a function, then add the function name, arguments and execution context to to slice that will activate the function.

Note: the context argument is set to this in this example because the function is part of this.

pieSliceWithFunction: PieSlice = { title: 'Slice 1', func: 'sliceFunction', args: ['string arg', 123], context: this }
pieSliceWithFunction2: PieSlice = { title: 'Slice 2', func: 'sliceFunction', args: ['different String', 321], context: this }
pieSlices: PieSlice[] = [ this.pieSliceWithFunction, this.pieSliceWithFunction2, { title: 'Slice 3' }, { title: 'Slice 4' }];

pieOptions: PieOptions = {};

constructor(private pie: AngularPieService) {}

callPie(event) {
    this.pie.call(event, this.pieSlices, this, this.pieOptions);
}

public sliceFunction(stringArg, numberArg) {
    console.log(stringArg);
    console.log(numberArg);
}

Pie Options

Pie Slice Options

imgData Object