ng-bpmn
v3.0.0
Published
Jquery bpmn module [Bpmn](https://bpmn.io)
Downloads
22
Readme
Angular bpmn module
Jquery bpmn module Bpmn
This package wraps the bpmn module for Angular.
Demo project in Stackblitz DEMO
Demo src Demo
This package support Angular 6, see please demo src.
Getting started
Install via npm :
npm install ng-bpmn
npm install [email protected]
Then include the BpmnModule
module in your module.
import { BpmnModule } from 'ng-bpmn';
@NgModule({
imports: [
BrowserModule,
BpmnModule,
...
]
...
})
export class AppModule {}
For index.html style urls
<!-- necessary stylesheets -->
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/assets/diagram-js.css" />
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/assets/bpmn-font/css/bpmn.css" />
Or you can add this in your SCSS pipe
@import "~bpmn-js/dist/assets/diagram-js.css";
@import "~bpmn-js/dist/assets/bpmn-font/css/bpmn.css";
Import DiagramComponent in your component :
import { Component, OnInit, ViewChild } from '@angular/core';
import { DiagramComponent } from 'ng-bpmn';
import { Options } from 'bpmn';
@Component({
selector: 'demo-app',
templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {
options: Options;
@ViewChild(DiagramComponent) ucDiagram: DiagramComponent;
constructor() {}
ngOnInit() {
this.options = {
editable: true,
eventLimit: false,
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay,listMonth'
},
events: data
};
}
}
then your app.component.html
<div *ngIf="options">
<ng-bpmn #ucDiagram [options]="options" (eventClick)="eventClick($event.detail)" (eventDrop)="updateEvent($event.detail)"
(eventResize)="updateEvent($event.detail)" (clickButton)="clickButton($event.detail)"></ng-bpmn>
</div>
Events binging
TODO:
Thanks
- Mario Mol (@mariohmol)
License
MIT