I would like to replace the following jquery statement in my client side with angular (7.x):

```
   //dropdown on hover in jquery

if($('.navbar').width() > 1007)
  {
    $('.nav .dropdown').hover(function() {
      $(this).addClass('open');
    },
    function() {
      $(this).removeClass('open');
    });
  }

```

By now I provisionally used ElementRef and Renderer2 together with corresponding (mouse...)-Eventlisteners. I could move this logic also to a directive with a Hostlistener...

```
   //element-wise angular code
<li #drop class="dropdown singleDro" (mouseover)="openDropDown($event)" (mouseleave)="closeDropDown($event)">
            <a href="javascript:void(0)"
               class="dropdown-toggle"
               data-toggle="dropdown"
               role="button"
               aria-haspopup="true"
               aria-expanded="false">
              <i class="fa fa-list-ul icon-dash" aria-hidden="true"></i> Listings <i class="fa fa-angle-down" aria-hidden="true"></i></a>
            <ul class="dropdown-menu">
              <li><a [routerLink]="['/dashboard/shop/add']">Add Shop</a></li>
              <li><a [routerLink]="['/dashboard/shop/view']">My Shops</a></li>
            </ul>
          </li>

//component code
  openDropDown(event: Event) {
    if (this.navbarDash.nativeElement.offsetWidth > 1007) {
      this.renderer.addClass(this.drop.nativeElement, 'open');
    }
  }
  closeDropDown(event: Event) {
    this.renderer.removeClass(this.drop.nativeElement, 'open');
  }

```

...but I am looking for a more holistic solution, which has a similar effect like the jquery solution. I would prefer some solution on app-level which can be propagated to all children...

**Could you please give me hint which concept could help to achieve the described.**

Thank you

Hucho