If you're finding that the solution provided in the accepted answer isn't quite doing the trick, here's an alternative approach:

One effective method is to create a directive. By doing this, you can easily add the directive to any element of your choosing, ensuring that the listeners will only activate for that specific element.

Here's a simple example:

@Directive({
   selector: "[focus-out-directive]"
})
export class FocusOutDirective {
   @Output() onFocusOut: EventEmitter<boolean> = new EventEmitter<false>();

   @HostListener("focusout", ["$event"])
   public onListenerTriggered(event: any): void {
       this.onFocusOut.emit(true);
   }
}

To apply this listener to your HTML elements, simply include the directive selector – in this case focus-out-directive – and then specify the function you want to trigger within your component.

For example:

<input type='text' focus-out-directive (onFocusOut)='myFunction($event)'/>

Utilize event listener:

import { Renderer2 } from '@angular/core';

constructor(private renderer: Renderer2) { }

// Obtain this.myElement using document.getElement... or ElementRef 
ngOnInit() {

  // Use scroll or any other event
  this.renderer.listen(this.myElement, 'scroll', (event) => {

    // Perform actions with 'event'
    console.log(this.myElement.scrollTop);

  });

}}

One effective approach for a global listener in Angular is by using @hostliterner. However, if you need to target specific elements, you can achieve it like this:

<div (event)="onEvent($e)"></div>

within your Angular component.

onEvent($e) { //perform actions... }

Experts in the field have provided the following solution:

<div (event)="onMouseEnter()">
    <p>United States of America (mouseenter)</p>
</div>

<div (event)="onMouseOut()">
    <p>United States of America (mouseout)</p>
</div>

When implementing this in the class component, the code should look like this:

import { Component, OnInit, HostListener } from '@angular/core';

@Component({
  selector: 'app-simpleevent',
  templateUrl: './simpleevent.component.html',
  styleUrls: ['./simpleevent.component.css']
})
export class SimpleeventComponent implements OnInit {
  @HostListener("mouseenter", ["$event"]) onMouseEnter(event: Event) {
    console.log(event.type);
  }

  @HostListener("mouseout", ["$event"]) onMouseOut(event: Event) {
    console.log(event.type);
    console.log(event.target)
  }
  constructor() { }

  ngOnInit() {
  }
}

import { Directive, ElementRef, OnInit, Output, EventEmitter} from '@angular/core';

    @Directive({
          selector: '[checkClickEvent]'
        })

        export class CustomCheckClickDirective implements OnInit {

        @Output() public checkClickEvent = new EventEmitter();

        constructor(private _elementRef: ElementRef) { }

        @HostListener('click', ['$event.target']) public onClick(targetElement) {

            const isClickInsideElement = this._elementRef.nativeElement.contains(targetElement);

            (isClickInsideElement)?this.checkClickEvent.emit(true):this.checkClickEvent.emit(false);
          }
        }

Google brought up an interesting point that the approved answer addresses the question but lacks guidance on finding a solution.

I expanded upon Alex's response because I needed a way to utilize the functionality already present in my @HostListener for fetching notifications based on different screen sizes.

For instance, in my application, the notifications page has its own route on mobile devices but is located in the sidebar on tablets and larger screens. Therefore, using the @HostListener there wouldn't work as it would only activate when reaching the bottom of the entire page, not the sidebar specifically.

Instead, I targeted the specific <div> I was interested in and attached the necessary functionalities. Here is the code snippet:

attachListenerToContainer() {
    let elementToListenTo = this.ele ? this.ele : 'window';
    
    this.renderer.listen(elementToListenTo, 'scroll', (event) => {
      if(!this.reachedBottom) {
        if((getHeight(this.ele) + getScrollTop(this.ele)) >= getOffset(this.ele)) {
          this.reachedBottom = true;
          this.getNextNotificationsPage();
        }
      }
    });

    function getScrollTop(ele) {
      return ele ? ele.scrollTop : window.scrollY;
    }
    function getHeight(ele) {
      return ele ? ele.clientHeight : window.innerHeight;
    }
    function getOffset(ele) {
      return ele ? ele.scrollHeight : document.body.offsetHeight;
    }
  }

The this.ele references the container div I'm interested in, which I locate within the ngAfterViewInit() lifecycle hook for tablet-sized screens and above. If the element cannot be found, I default to using the window, effectively mimicking the behavior of @HostListener.

Additionally, here's how I located the desired container element in my case:

this.ele = document.getElementsByClassName('notifications')[0]; 

When the user clicks on a button up to a certain depth within a directive, the class "hide" will be toggled.

import { Directive, HostBinding, HostListener } from '@angular/core'

@Directive({
    selector: '[Toggle]',
})
export class ToggleDirective {
    @HostBinding('class.hide') isClosed = true

    @HostListener('click', ['$event.target']) toggleDropdown(el: HTMLElement) {
        if (this.isButton(el)) this.isClosed = !this.isClosed
    }

    isButton(el: HTMLElement, level = 3) {
        for (let btn: HTMLElement | undefined | null = el; level > 0; level--) {
            if (btn?.tagName === 'BUTTON') return true
            btn = btn?.parentElement
        }
        return false
    }
    constructor() {}
}

Give this a try (triggered by pressing the tab key)

@HostListener('document:keydown.tab', ['$event']) onKeydownHandler(event: KeyboardEvent) {

    if ((document as any).getElementById('parentIdOfHtml').contains((event as any).target)) {
      debugger
    }
  }