deleteSelection @ Angular.. TypeError cannot read properties of diagram

GoJS
1

Hi, Managed to modify the angular components of a diagram with the angular basic example. Request your help for the below issue…
A normal “changedSelection” event in the diagram is not executed as previous like below
//
“ModelChanged”: e => {
if (e.isTransactionFinished) {
// allChecks(true);
myPaletteSmall.commandHandler.deleteSelection();
console.log(myDiagram.model.nodeDataArray)
console.log(myPaletteSmall.model.nodeDataArray)
//
Above is working well upon a drop from palette to diagram VS with a proper structure of public methods as per angular basic reference… Is not allowing to call the palette or diagram nodes
Have initialized and updated the “ngAfterViewInit” with reference to Angular library as well
//
public initDiagram(): go.Diagram {
const $ = go.GraphObject.make;
let dia = $(go.Diagram, {
“undoManager.isEnabled”: true,
“clickCreatingTool.archetypeNodeData”: {
text: “new node”,
color: “lightblue”,
},
ModelChanged: (e) => {
if (e.isTransactionFinished) {
// this.palette.allowDelete;
console.log(this.diagram.model.nodeDataArray);
removeFromPalette();
}
},
});

public diagram: go.Diagram = null;
public palette: go.Palette = null;
public observedDiagram = null;

public ngAfterViewInit() {
const appComp: AppComponent = this;
if (this.diagram) return (this.diagram = this.myDiagramComponent.diagram);
if (this.palette) return (this.palette = this.myPaletteComponent.palette);
if (this.observedDiagram) return;
this.observedDiagram = this.myDiagramComponent.diagram;
}

2

Where is that “ModelChanged” DiagramEvent listener being defined? What is “myPaletteSmall”? I don’t see it defined anywhere. Why not “this.palette”?

3

Since the first part is working fine, didn’t update with full code, added only the relevant part… It is same as Planogram sample with 4 palettes and a diagram. Added upon init function for diagram and before defining node template of diagram this is called…

const myDiagram = new go.Diagram("recordingDiagramDiv",
      // {
      //   layout:
      //     $(go.GridLayout, { sorting: go.GridLayout.Ascending }), // use a GridLayout
      // padding: new go.Margin(0, 0, 0, 0), // to see the names of shapes on the bottom row       
      // gridCellSize: new go.Size(50, 50),

      {
        grid: $(go.Panel, "Grid",
          { gridCellSize: CellSize },
          $(go.Shape), //"LineH", { stroke: "lightgray" }),
          $(go.Shape) //, "LineV", { stroke: "lightgray" })
        ),
        // support grid snapping when dragging and when resizing
        "draggingTool.isGridSnapEnabled": true,
        "draggingTool.gridSnapCellSpot": go.Spot.Center,
        "resizingTool.isGridSnapEnabled": true,
        "animationManager.isEnabled": true,
        "undoManager.isEnabled": true,

        allowDragOut: true,
        "commandHandler.archetypeGroupData": { isGroup: true },
        // handle undo or redo maybe changing Diagram properties controlled by check boxes
        "ModelChanged": e => {
          if (e.isTransactionFinished) {
            // allChecks(true);
            myPaletteSmall.commandHandler.deleteSelection();
            console.log(myDiagram.model.nodeDataArray)
            console.log(myPaletteSmall.model.nodeDataArray)
          }
          new go.Binding("text").makeTwoWay()
        },
      },

    );

Above code is fully inside ngAftrerViewInIt and where as now to improve it better, updated as per the angular basic example with all public methods and am not able to retrieve the diagram or palette using this…

addToPalette() {
    var node = this.myDiagramComponent.diagram.selection
      .filter((p) => p instanceof go.Node)
      .first();
    if (node !== null) {
      this.myPaletteComponent.palette.model.startTransaction();
      var item = this.myPaletteComponent.palette.model.copyNodeData(node.data);
      this.myPaletteComponent.palette.model.addNodeData(item);
      this.myPaletteComponent.palette.model.commitTransaction(
        "added item to palette"
      );
      this.myDiagramComponent.diagram.commandHandler.deleteSelection();
      console.log(
        "ADDED TO PALETTE : " +
          this.myPaletteComponent.modelData.diagramNodeData
      );
    }
  }
}
function removeFromPalette() {
  var node = this.palette.selection
    .filter((p) => p instanceof go.Node)
    .first();
  if (node !== null) {
    this.palette.model.startTransaction();
    // var item = this.myPaletteComponent.palette.model.removeNodeData(node.data);
    this.palette.model.removeNodeData;
    this.palette.model.commitTransaction(
      "REMOVED item from palette"
    );
  }
}

And the removeFromPalette function is as above, addToPalette function is executing upon a click event button called in html and this function is workingfine… but while trying to apply it upon drag and drop am not able to run the removeFromPalette function with command handler.deleteSelection or using removeNodeData properties… And getting the errors as can’t read diagram or palette…