How to customize the color of the shapes using color picker in Angular platform

To customize the color of shapes in the Angular Diagram, you can use fill property of shapes. This property allows you to set the color to shapes in diagram.

Refer to the code snippet below to customize the color of nodes using the fill property:

// Set fill property to customize color of nodes
var nodes = [
   {
       id:'node1',
       offsetX: 250,
       offsetY: 250,
       width: 100,
       height: 100,
       style: {fill:'white'}
   }
] 

To dynamically customize the color of shapes in your diagram, you can use color picker component Angular ColorPicker. The color picker allows users to select a color, which is then applied to the fill property of the shapes in the diagram. This updates the color of the shapes in real-time, providing a smooth and interactive way to customize the appearance of elements in your diagram

Refer to the code snippet below to customize the color of shapes:

public colorChange(args) {
  // Get the selected nodes
  const selectedNodes = this.diagram.selectedItems.nodes;
  // Change the fill color of each selected node
  for (let i = 0; i < selectedNodes.length; i++) {
    const node = selectedNodes[i];
    node.style.fill = args.value;
    this.diagram.dataBind();
  }
} 

You can find a working example of this implementation in the provided sample on StackBlitz.

Sample - click here for sample