How to integrate token-simulation of bpmn-js with angular 10 application

i want to import token-simulation module into my angular application.
can I get some sample code of how to integrate token-simulation of bpmn-js into angular application.
Along with this I want to use bpmn-js viewer in my angular application instead of modeler.

I suggest you try adding the token simulation to bpmn-js without Angular first.

can you explain it clearly. i have added token-simulation plugin in camunda modeler.
so can’t I include token-simulation npm in angular??.
if possible provide some sample code.

You can use the token simulation outside of the Camunda Modeler: this is node application.
this application implementation is different from angular application.
I just want to know what to bind in the html file to get the token simulator toggle button in my webpage.

ngOnInit(): void {
this.modeler = new Modeler({
container: β€˜#canvas’,
additionalModules: [
keyboard: {
bindTo: document

I am able to integrate token-simulation into my application.

Thank you

Glad to hear! Mind you sharing your solution so others can benefit from it in the future?

bpmn-js-token-simulation, bpmn-js-properties-panel, bpmn-js and diagram-js npm packages should be installed.

stylesheets required for tokensimulation and properties-panel should be included in styles:[] of angular.json file.

typescript code:

ngOnInit(): void {
    this.modeler = new Modeler({
      container: '#canvas',
      width: '100%',
      height: '600px',
      propertiesPanel: {
        parent: '#properties'
      additionalModules: [

html code:

<div class="modeler"
    <div id="canvas"></div
    <div class="properties-panel" id="properties"</div 
1 Like