Scenario
We need to track mouseenter events over the visual area that the <p> element of the app.component.ts component occupies.
Approach
Create a mouseenter() method in the mouse.directive.ts and decorate with @HostListener('mouseenter') . Apply the mouse directive to the p element ( <p mouse>. Here’s a demo:
Note that any time we mouseenter , mouseover , or mouseout of the of the app.component.html content a mouse event is triggered.
