import { AfterContentInit, Component, ElementRef, Input, OnChanges, OnDestroy, Output, ViewChild, SimpleChanges, EventEmitter } from '@angular/core'; import type Canvas from 'diagram-js/lib/core/Canvas'; import type { ImportDoneEvent } from 'bpmn-js/lib/BaseViewer'; /**  * 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-modeler.production.min.js'; @Component({ selector: 'app-diagram', template: `  <div #ref class="diagram-container"></div>  `, styles: [ `  .diagram-container {  height: 100%;  width: 100%;  }  ` ] }) export class DiagramComponent implements AfterContentInit, OnChanges, OnDestroy { // instantiate BpmnJS with component private bpmnJS: BpmnJS; // retrieve DOM element reference @ViewChild('ref', { static: true }) private el: ElementRef; @Input() private url: string; constructor() { this.bpmnJS = new BpmnJS(); this.bpmnJS.on<ImportDoneEvent>('import.done', ({ error }) => { if (!error) { this.bpmnJS.get<Canvas>('canvas').zoom('fit-viewport'); } }); } ngAfterContentInit(): void { // attach BpmnJS instance to DOM element this.bpmnJS.attachTo(this.el.nativeElement); } ngOnChanges(changes: SimpleChanges) { // re-import whenever the url changes if (changes.url) { this.loadUrl(changes.url.currentValue).then(xml => { return this.bpmnJS.importXML(xml); }); } } ngOnDestroy(): void { // destroy BpmnJS instance this.bpmnJS.destroy(); } private loadUrl(url: string) : Promise<string> { throw new Error('not implemented - return diagram XML from url'); } }