Loading Angular component when a GoJs link is clicked

Question

I am working on an angular 17 app. As a part of the shared lib, I am creating generic classes for GoJs.

One such class is link.ts which defines the linkTemplate, on link hover, I want to load an angular component.

I am not using GoJs for angular, neither want to convert the generic class into a component. How can I load an angular component in gojs ?

For ex. have a look at this snippet -

It will load an adornment on mouse hover, click of which will generate an alert.

I want to load an angular 17 standalone component on the click.

const $ = go.GraphObject.make;

    let linkHoverAdornment =
        $(go.Adornment, "Spot",
          {
            // hide the Adornment when the mouse leaves it
            mouseLeave: (e, obj) => {
              let ad = obj.part;
              (ad as any).adornedPart.removeAdornment("mouseHover");
            },
            padding: 10
          },
          $(go.Placeholder,
            {
              isActionable: true,
              click: (e: any, obj: any) => {
                var node = obj.part.adornedPart;
                node.diagram.select(node);
              }
            }),
          $("Button",
            { alignment: go.Spot.Right, alignmentFocus: go.Spot.Left},
            { 
              click: (e, obj) => {
                alert("load menu component")
              } 
            },
            $(go.TextBlock, " + icon "))
        );



    let linkTemplateObj = $(
      OffsetLink,
      {
        relinkableFrom: true,
        relinkableTo: true,
        selectable: false,
        corner: defaultDiagramStyles.nodeCornerSize,
        routing: go.Link.AvoidsNodes,
        layoutConditions: go.Part.LayoutStandard & ~go.Part.LayoutAdded & ~go.Part.LayoutRemoved,
        mouseHover: (e, obj) => {
          linkHoverAdornment.adornedObject = obj.part;
          (obj.part as any).addAdornment("mouseHover", linkHoverAdornment);
        }
      },
      $(go.Shape, {
        toArrow: 'Standard',
        mouseEnter: (e: any, obj: any) => { obj.strokeWidth = 4; obj.stroke = "blue"; },
        mouseLeave: (e: any, obj: any) => { 
          obj.strokeWidth = 2; 
          obj.stroke = "black";
          console.log('mouse leave 2');
        },
      }),
    );