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.
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>
TODO:
- npm i @angular/compiler tsickle typescript@3.1.6 -g
- Mario Mol (@mariohmol)
MIT