Can not access component Level properties in TextBlock click event

// when textblock click calling textblockClick callback in that callblack how to access editAttributeId,
i tried that: LinkComponent = this but this is showing that.editAttributeId undefined

class LinkComponent  //angular component {
     public **editAttributeId** = '';
 

     public initDiagram(): go.Diagram {
        const $ = go.GraphObject.make;
        this.dia = $(go.Diagram, {}),
                  allowDelete: true,
                 allowCopy: false,
                layout: $(go.ForceDirectedLayout),
               model: $(go.GraphLinksModel,
               {
                  copiesArrays: true,
                  copiesArrayObjects: true,
                  linkKeyProperty: 'key'
                } )


      let textblockClick = (e, obj) => {
                  let item1 = e.diagram.selection.first().data.items.find(i => i.name == obj.text);
               this.editAttributeId = item1.id;
              var node = obj.part;
        
             console.log(this.editAttributeId);
    }

    let itemTempl =
    $(go.Panel, "Horizontal",
      $(go.Shape,
        { desiredSize: new go.Size(15, 15), strokeJoin: "round", strokeWidth: 3, stroke: null, margin: 2 },
        new go.Binding("figure", "figure"),
        new go.Binding("fill", "color"),
        new go.Binding("stroke", "color")),
      $(go.TextBlock,
        {
          stroke: "gray",
          font: "12px sans-serif",
          isMultiline: false,
          click: textblockClick
        },
        new go.Binding("text", "name"))
    );

        this.dia.nodeTemplate =
    $(go.Node, "Spot",  // the whole node panel
          {
            locationSpot: go.Spot.Center,
            selectionAdorned: true,
            resizable: true,
            layoutConditions: go.Part.LayoutStandard & ~go.Part.LayoutNodeSized,
            fromSpot: go.Spot.AllSides,
           toSpot: go.Spot.AllSides,
            isShadowed: true,
            shadowOffset: new go.Point(3, 3),
            shadowColor: "#C5C1AA"
          },
          new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
          // whenever the PanelExpanderButton changes the visible property of the "LIST" panel,
          // clear out any desiredSize set by the ResizingTool.
          new go.Binding("desiredSize", "visible", function(v) { return new go.Size(NaN, NaN); }).ofObject("LIST"),
          // define the node's outer shape, which will surround the Table
          $(go.Shape, "RoundedRectangle",
            { fill: 'white', stroke: "#eeeeee", strokeWidth: 3,
              portId : "",
            fromLinkable: true, toLinkable: true, cursor: "pointer",
           }),
          $(go.Panel, "Table",
            { margin: 8, stretch: go.GraphObject.Fill },
            $(go.RowColumnDefinition, { row: 0, sizing: go.RowColumnDefinition.None }),
            // the table header
            $(go.TextBlock,
              {
                row: 0, alignment: go.Spot.Center,
                margin: new go.Margin(0, 24, 0, 2),  // leave room for Button
                font: "14px sans-serif",
                isMultiline: false,
                stroke: "gray",
                editable: true
              },
              new go.Binding("text", "key")),
            // the collapse/expand button
            $("PanelExpanderButton", "LIST",  // the name of the element whose visibility this button toggles
              { row: 0, alignment: go.Spot.TopRight }),
            // the list of Panels, each showing an attribute
            $(go.Panel, "Vertical",
              {
                name: "LIST",
                row: 1,
                padding: 3,
                alignment: go.Spot.TopLeft,
                defaultAlignment: go.Spot.Left,
                stretch: go.GraphObject.Horizontal,
                itemTemplate: itemTempl,

              },
              new go.Binding("itemArray", "items").makeTwoWay())
          ) );  // end Node
    });
}

//html component in angular
<gojs-diagram #myDiagram [initDiagram]=‘initDiagram’
[divClassName]=‘diagramDivClassName’ [skipsDiagramUpdate]=‘skipsDiagramUpdate’
(modelChange)=‘diagramModelChange($event)’ [nodeDataArray]=‘diagramNodeData’ [linkDataArray]=‘diagramLinkData’>

if not possible please suggest me different scenarios

To format your code when posting here, surround your code with lines consisting of only triple backquotes. I have done this for you this time, but please do so in the future.

And please indent your code correctly. I suspect that you have some problems with parentheses and curly braces.

In your function, obj.part would be more reliable than e.diagram.selection.first().

That said, I do not see why it is not working for you. You have to debug it to see what is happening.

issue solved to access LinkComponent in initDiagram should call initDiagram().bind(this) when binding in html