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

Issue

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>

Solution

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();
}

Answered By - Sam Scholefield