How to compare the value of a tagName and a string in Angular?

Question

I try to find out when the tagname is "MAIN" an then to trigger some functions but unfortunately I steadily receive the error

This condition will always return true since the types "Event" and "Main" have no overlaps.

onMouseWheel(evt) {
event = evt.target.tagName;
while(event != 'MAIN')
  event = evt.target.parentNode.tagName;
}

Any ideas how I could achieve this?

Answer 1

The angular approach to this is to attach the angular (wheel) directive to the element you're interested in and handle it that way.

<main (wheel)="onMouseWheel($event)"></main>

This way the wheel event is only triggering the handler when it occurs on elements you're interested in.