Angular 5 CLI-based BPMN project now on Github


Hi all,

in the near future I am going to migrate my Angular2/BPMN project to Angular 5. I’ve started on a sample project to make the Angular/BPMN integration as smooth as possible.

So far it looks pretty good; I got custom properties and custom palette working with (almost) no sweat.

If you are interested, have a look at

Feedback is welcome, here or on Github. Especially from the BPMN-JS developers, if things can be done in other and better ways.


Hi @narve,

thanks for your heads up! Looks like an interesting project. We will check it out.


Hi @narve

I too have started using bpmnjs on an angular 5 project… i’ve had some success in getting bpmn moddler running and integrating with the property panel.

Have you had any luck trying to get the property panel element populate with data from a service… The trouble i’m having is that the service is providing data via an async method we cannot load data from the an async method to a select box… See this article

The way i see it happening is creating my own element and adding it to the property panel… (i don’t know is its possible but my inspiration is the FormProps.js in bpmn-js-properties-panel\lib\factory\SelectEntryFactory.js)

Have you found any other ways in solving this problem?


I was also having trouble populating the elements using Rest Service.

I found a workaround that. I had a service component where I instantiated an httpClient reference globally and was storing the results of service within the component using Promise.


Regarding fetching data via REST and populating the properties panel etc:

Yes, it is tricky because the BPMN.IO API is (as far as I know) synchronous, but sometimes you need to fetch data asynchronosly, e.g. through REST service.

I my project I solved this by fetching needed data first, and then (when I have all the data I need) I instantiate the required BMPN.IO modules and paint the canvas with properties panel. This works for me, but of course it might not work for all use cases.


Hi Narve,

Instead of keeping BPMN as properties panel provider, is it possible to keep Camunda as provider in the Angular implementation ?



Probably. Note that my project uses a custom properties panel provider, but it re-uses the default BPMN properties provider. It should be possible to reuse the camunda properties provider - try npm installing it and the importing it.


I changed the implementation to use Camunda BPMN moddle using the following code:

Modeller code :

additionalModules: [
{[InjectionNames.camundaPropertiesProvider]: [‘type’, OriginalPropertiesProvider.propertiesProvider[1]]},
{[InjectionNames.propertiesProvider]: [‘type’, CustomPropsProvider]},
{[InjectionNames.elementTemplates]: [‘type’, ElementTemplates]},
{[InjectionNames.originalPaletteProvider]: [‘type’, OriginalPaletteProvider]},
{[InjectionNames.paletteProvider]: [‘type’, CustomPaletteProvider]},
propertiesPanel: {
parent: ‘#properties
moddleExtensions: {
camunda: _CamundaModdle,

Imports :

import * as _CamundaPropertiesProvider from ‘bpmn-js-properties-panel/lib/provider/camunda’;
import * as _ElementTemplates from ‘bpmn-js-properties-panel/lib/provider/camunda/element-templates/ElementTemplates’;
import * as _CamundaModdle from ‘camunda-bpmn-moddle/resources/camunda.json’;

InjectionNames = {
camundaExtensionModule: ‘camundaExtensionModule’,
camundaPropertiesProvider: ‘camundaPropertiesProvider’,
elementTemplates: ‘elementTemplates’

export const CamundaExtensionModule = _CamundaExtensionModule;
export const CamundaPropertiesProvider = _CamundaPropertiesProvider;
export const ElementTemplates = _ElementTemplates;

typings.d.ts :

declare module “*.json” {
const value: any;
export default value;

CustomPropsProvider.ts :

constructor(private translate, private camundaPropertiesProvider) {…

and in getTabs Method

return this.camundaPropertiesProvider.getTabs(element)…

Thank you Narve.


Can u elaborate on this further. preferably with an example… ?