ERROR TypeError: Cannot read properties of undefined (reading 'nativeElement'): How do I resolve this?

Question

The state of my current code is like this:

<mat-tree-node>
...
 <div *ngIf="node.type=='assembly' || node.type=='part'" style="display: inline;"
                    (contextmenu)="asmStateServ.contextMenu($event, node.name)">{{node.instanceName}}
                    ({{node.name}})
                    <div class="customContext" (click)="asmStateServ.stopPropagation($event)" #menu>
                        <ul>
                            <li (click)="asmStateServ.selectNode(node.name)">Select</li>
                            <li (click)="asmStateServ.deSelectNode(node.name)">Deselect</li>
                        </ul>
                    </div>
                </div>
</mat-tree-node>

In the .ts file, it is this:

@ViewChild('menu') menu: ElementRef
    public contextMenu(event: MouseEvent, node: asmTreeNode | asmTreeNodeFlat | asmTreeNodeScene) {
        event.preventDefault();
        this.menu.nativeElement.style.display = "block";
        this.menu.nativeElement.style.top = event.pageY + "px"
        this.menu.nativeElement.style.left = event.pageX + "px"

    }

    public disappearContextMenu() {
        this.menu.nativeElement.style.display = "none";

    }

    public stopPropagation(event: any) {
        event.stopPropagation();

    }

However, the menu doesn't open and that specific console error stays on. I was wondering what might be wrong in this case? I am very new in Angular and programming in general so it would mean a lot to me if you write the correct code down :)

Answer 1

You're attempting to use @ViewChild in the property asmStateServ, which I'm guessing by the name is an injected service. @ViewChild('menu') only works in the property initializers of the component class, not inside of an injected service. You can easily pass this element as a parameter to these methods though. Note this passes an HTMLDivElement not an ElementRef.

I'm just showing the relevant parts here.

<mat-tree-node>
  ...
  <div (contextmenu)="asmStateServ.contextMenu($event, menu)">
    ...
    <div #menu>...</div>
  </div>
</mat-tree-node>

    public contextMenu(event: MouseEvent, menu: HTMLDivElement) {
        event.preventDefault();
        menu.style.display = "block";
        menu.style.top = event.pageY + "px"
        menu.style.left = event.pageX + "px"
    }