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 :)
You can add null checking(?) before your nativeElement
this.menu?.nativeElement?.style.display = "none";
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"
}