CODEWITHSUNDEEP
jquerycssangular
Hucho
Hucho

Reputation: 101

How to open dropdown on hover with angular instead of jquery?

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

Upvotes: 2

Views: 9918

Answers (3)

Hucho
Hucho

Reputation: 101

Finally this worked:

import {Directive, HostListener, ElementRef, Renderer2} from '@angular/core';

@Directive({
  selector: '[appDropOpen]'
})
export class DropOpenDirective {

  constructor(private el: ElementRef, private renderer: Renderer2) { }

  @HostListener('mouseover') onMouseOver() {
      const elementCollection = document.getElementsByClassName('navbar');
    if (elementCollection[0].clientWidth > 1007) {
    this.renderer.addClass(this.el.nativeElement, 'open');
    }
  }

  @HostListener('mouseleave') onMouseLeave() {
    this.renderer.removeClass(this.el.nativeElement, 'open');
  }
}

Upvotes: 0

Shifenis
Shifenis

Reputation: 1125

You can just use NgClass, when mouseover is triggered, you can just put a boolean to true.

Something like this:

<li #drop 
class="dropdown singleDro" 
(mouseover)="isOpened = true" 
(mouseleave)="isOpened = false" 
ngClass="isOpened ? 'open' : ''">...dropdown-stuff..</li>

Upvotes: 3

Bunyamin Coskuner
Bunyamin Coskuner

Reputation: 8859

You can use ngClass or class.open as follows

<li #drop class="dropdown singleDro" 
[class.open]="isDropdownOpen"
(mouseover)="openDropDown($event)" 
(mouseleave)="closeDropDown($event)">...dropdown-stuff..</li>

or 

<li #drop class="dropdown singleDro" 
[ngClass]="{ 'open': isDropdownOpen}"
(mouseover)="openDropDown($event)" 
(mouseleave)="closeDropDown($event)">...dropdown-stuff..</li>

Within your component, define a class member called isDropdownOpen and simply toggle the value of it on hover


  isDropdownOpen = false;

  ...

  openDropDown(event: Event) {
    if (this.navbarDash.nativeElement.offsetWidth > 1007) {
      this.isDropdownOpen = true;
    }
  }
  closeDropDown(event: Event) {
    this.isDropdownOpen = false;
  }

Upvotes: 0

Related Questions