How to color BPMN-JS diagram in Angular framework?

Developers
1

I’m currenty setting up the diagra like this:

import { BpmnEditorComponent } from 'ng-bpmn';
  @ViewChild('ucBpmn', {static:false}) ucBpmn: BpmnEditorComponent;

  ngAfterViewInit(): void {
    this.ucBpmn.loadXml( diagramMock );
  }

<ng-bpmn [type]="type" #ucBpmn></ng-bpmn>

I want to color some tasks in them, trying dynamically, but can’t even color them thus far.
I’m looking up examples but can’t get any to work. Would anyone please help me or show a demo of it if exists?

2

What does this have to do with angular?

Have a look at this:

3

I am not refering the diagram like that, I do it like in the code I showe above, I can’t refer the diagram by doing a bpmnModeler.get(‘modeling’)

4

I’m not entirely sure what you’re doing since your code example is minimal.

Have a look at this general example of how to import a diagram: https://github.com/bpmn-io/bpmn-js-examples/blob/master/starter/modeler.html

5

Hi, yeah apparently there was no way to color the diagram with my set up, sucks cause it was the easiest way, but strip it down and did it the way it’s in most examples, then i just colored it the way that tuto says.

About my code being minimal, it really was all the code necesary to boot it up when using ng-bpmn tho.

Thanks tho

6

hello can you give me where did you find the tutorials of coloring.

Thank you !

7

An introduction can be found here: https://bpmn.io/blog/posts/2016-colors-bpmn-js.html