owi1972 / bpmn-js-example-angular

An example how to integrate bpmn-js with an Angular application.

bpmn-js-example-angular

An example how to integrate bpmn-js with an Angular application.

Prerequisites

Assume you bootstrapped your application using the ng command:

ng new bpmn-js-app --defaults=true
cd bpmn-js-app

Integrating bpmn-js

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 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();

  // 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();
  }

}

Test the Example

npm install
npm run all

License

MIT