如何使用 Angular 在鼠标悬停时找到当前元素文本？

Question

This is my code:

 <ng-material-multilevel-menu (mouseover)="callMe($event)" mat-raised-button matTooltip={{tool}} [configuration]='config' class="nav" [items]='appItems'
            (selectedItem)="selectedItem($event)" (selectedLabel)="selectedLabel($event)">
          </ng-material-multilevel-menu>
        </nav>

My CallMe() function:

 callMe($event){
    console.log("Hello");
    console.log("event",$event);
  }

How can I display the label name on mouseover event?

Answer 1

Solution 1
Using the DOM html javascript

<ng-material-multilevel-menu onmouseover="callMe(this)" mat-raised-button matTooltip={{tool}} [configuration]='config' class="nav" [items]='appItems'
            (selectedItem)="selectedItem($event)" (selectedLabel)="selectedLabel($event)">
          </ng-material-multilevel-menu>
        </nav>

in index.html

<script>
        function callMe(x) {
            console.log(x)
        }
</script>

Solution 2
Using typescript file

<ng-material-multilevel-menu (mouseover)="callMe($event)" mat-raised-button matTooltip={{tool}} [configuration]='config' class="nav" [items]='appItems'
            (selectedItem)="selectedItem($event)" (selectedLabel)="selectedLabel($event)">
          </ng-material-multilevel-menu>
        </nav>

in typescript file

callMe(x) {
    console.log(x.fromElement.innerHTML)
    var doc = new DOMParser().parseFromString(x.fromElement.innerHTML, "text/html");
    console.log(doc.firstChild)
    console.log(doc.firstChild.lastChild.lastChild)
  }