Angular bpmn-js

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-js@3.1.0

Then include the NgBpmnEditorModule module in your module.

import { NgBpmnEditorModule } from 'ng-bpmn';

@NgModule({
  imports: [
    BrowserModule,
    NgBpmnEditorModule,
    ...
  ]
  ...
})
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 BpmnEditorComponent in your component :

import { Component, OnInit, ViewChild } from '@angular/core';
import { BpmnEditorComponent } from 'ng-bpmn';
import { Options } from 'bpmn';

@Component({
  selector: 'demo-app',
  templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {
  options: Options;
  @ViewChild(BpmnEditorComponent) ucDiagram: BpmnEditorComponent;
  constructor() {}
  ngOnInit() {
  }

}

then your app.component.html

<div *ngIf="options">
    <ng-bpmn #ucDiagram type="modeler"></ng-bpmn>
</div>

Events binging

TODO:

Development

• npm i @angular/compiler tsickle typescript@3.1.6 -g

Thanks

• Mario Mol (@mariohmol)

License

MIT