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

0
votes

The state of my current code is like this:

 <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>

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 :)

javascriptangulartypescriptviewchildelementref