An example how to integrate bpmn-js with an Angular application.
Assume you bootstrapped your application using the ng
command:
ng new bpmn-js-app --defaults=true
cd bpmn-js-app
Create a component similar to DiagramComponent
:
import {
AfterContentInit,
Component,
ElementRef,
OnDestroy,
ViewChild
} from '@angular/core';
/**
* You may include a different variant of BpmnJS:
*
* bpmn-viewer - displays BPMN diagrams without the ability
* to navigate them
* bpmn-modeler - bootstraps a full-fledged BPMN editor
*/
import * as BpmnJS from 'bpmn-js/dist/bpmn-navigated-viewer.development.js';
@Component({
selector: 'app-diagram',
template: `<div #ref class="diagram-container"></div>`,
styles: `
.diagram-container {
height: 100%;
width: 100%;
}
`
})
export class DiagramComponent implements AfterContentInit, OnDestroy {
// instantiate BpmnJS with component
private viewer: BpmnJS = new BpmnJS({
keyboard: { bindTo: document }
});
// retrieve DOM element reference
@ViewChild('ref') private el: ElementRef;
ngAfterContentInit(): void {
// attach BpmnJS instance to DOM element
this.viewer.attachTo(this.el.nativeElement);
}
ngOnDestroy(): void {
// destroy BpmnJS instance
this.viewer.destroy();
}
}
npm install
npm run all
MIT