Change grafcet steppanel shape dynamically in angular

GoJS
1

I would like to be able to change the color of the grafcet’s steppanel shape dynamically.
When defining the grafcet I am doing:

myDiagram.nodeTemplateMap.add("",
			  $(go.Node, "Horizontal", commonNodeStyle(),
				{ locationObjectName: "STEPPANEL", selectionObjectName: "STEPPANEL" },
				$(go.Panel, "Auto",
				  { // this is the port element, not the whole Node
					name: "STEPPANEL", portId: "",
					fromSpot: go.Spot.Bottom, fromLinkable: true,
					toSpot: go.Spot.Top, toLinkable: true
				  },
				  $(go.Shape, { name: "myname", fill: $rootScope.selected.color, minSize: new go.Size(20, 20) }),
				  $(go.TextBlock, "Step",
					{ margin: 3, editable: true },
					new go.Binding("text", "step").makeTwoWay())
				)
));

So, if my $rootScope.selected.color=“red” it initializes the grafcet to that color.

Pasted image1035×627 13.5 KB

But, also I would like to be able change it to other color when the grafcet if the user selects other type on the left tree. Each of the tree nodes have a different nodeDataArray and linkDataArray. So there are many different grafcets and the basic difference between them is the color of the steppanel shape.
I would like to see this:

Pasted image1031×611 11.8 KB

I have been trying to do something similar to the adornment example in:

looking to the changeColor function:
function changeColor(e, button) {
var node = button.part.adornedPart;
var shape = node.findObject(“SHAPE”);
if (shape === null) return;
node.diagram.startTransaction(“Change color”);
shape.fill = nextColor(shape.fill);
var color = nextColor(shape.fill)
button[“_buttonFillNormal”] = color; // update the button too
button[“_buttonFillOver”] = color;
//button.mouseEnter(e, button, ‘’);
node.diagram.commitTransaction(“Change color”);
}

How could I get this working?
Thanks in advance

2

In your node template, setting fill: $rootScope.selected.color causes the template to always initialize the Shape’s fill property to the value that it had at the time you constructed the template.

So you can either rebuild the template(s) before loading a new model, or you can use a GoJS Binding and call Model.setDataProperty. GoJS Data Binding -- Northwoods Software.