ng-bpmn

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 bpmn@3.6.1

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/bpmn-js@3.1.0/dist/assets/diagram-js.css" />
<link rel="stylesheet" href="https://unpkg.com/bpmn-js@3.1.0/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