How do I make my ngDropdown menu work on hover instead of click?

user_9050230 0
Viewed 1974

I'm using a template with Angular Bootstrap. I'm trying to call the dropdown event when i hover over it with my mouse instead of when i click on it. How can I call this event?

<div ngbDropdown class="d-inline-block dropdown">
    <a class="navbar-brand" id="dropdownBasic1" href="#basiccomponents" ngbDropdownToggle>Learning</a>
        <div ngbDropdownMenu aria-labelledby="dropdownBasic1" class="dropdown-primary">
            <a class="dropdown-item">Learning Outcomes</a>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item">Learning Plan</a>
        </div>
    </div>
bootstrap-4 angular
3 Answers

The dropdown API has a toggle() method, as well as explicit open() and close(). Call these on hover by binding to the (mouseenter) and (mouseleave) events.

Below are the basics, it is not a full example. You will need to provide a reference to your dropdown.

<div ngbDropdown class="d-inline-block dropdown" (mouseenter)="onHover($event)" (mouseleave)="onHover($event)">
  ...
<div>



onHover(event): void {
  this.myDropDown.toggle();
}
user_17093480

Create a variable (whatever name) for your ngbDropdown in html template:
#drop

Give the typescript type ngbDropdown
#drop="ngbDropdown"

At event mouseover on ngbDropdown call the method:

<li ngbDropdown #drop="ngbDropdown" (mouseover)='over(drop)'>

At event mouseout on ngbDropdownMenu call the method:

<div ngbDropdownMenu (mouseout)='out(drop)'>

  over(drop:NgbDropdown){
    drop.open()
  }
  out(drop:NgbDropdown){
    drop.close()
  }

    <li class="nav-item" ngbDropdown #drop="ngbDropdown" display="dynamic" placement="bottom-end" (mouseover)='over(drop)' (mouseout)='out(drop)'>
      <a class="nav-link" tabindex="0" ngbDropdownToggle id="navbarDropdown3" role="button">
        Dynamic
      </a>
      <div ngbDropdownMenu aria-labelledby="navbarDropdown3" class="dropdown-menu">
        <a ngbDropdownItem href="#" (click)="$event.preventDefault()">Action</a>
        <a ngbDropdownItem href="#" (click)="$event.preventDefault()">Another action</a>
        <a ngbDropdownItem href="#" (click)="$event.preventDefault()">Something else here</a>
      </div>
    </li>
user_9353300
user_122568230
Related