How to implement Hover-Based Popup in Angular DropdownButton?

2 mins read

Overview

In Angular applications, you may want to create a user interface where a popup is displayed when the mouse hovers over a DropDownButton and closes when the mouse leaves the area. This article demonstrates how to achieve this behavior using the Syncfusion Angular UI components.

Prerequisites

Syncfusion Angular Split Buttons module
Angular framework setup

Implementation

First, ensure that you have imported the necessary modules and components from @syncfusion/ej2-angular-splitbuttons. Here’s a basic setup:

import { ViewChild } from '@angular/core';
import { DropDownButtonModule, DropDownButtonComponent, ItemModel } from '@syncfusion/ej2-angular-splitbuttons';
import { Component, ViewEncapsulation } from '@angular/core';
import { getComponent } from '@syncfusion/ej2-base';

@Component({
  standalone: true,
  imports: [
    DropDownButtonModule,
  ],
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css'],
  encapsulation: ViewEncapsulation.None,
})
export class AppComponent {
  // Component code here
}

Step 1: Define the DropdownButton and Items

In your component, define the DropDownButton and the items it will contain:

@ViewChild('drpdown')
public dropDownBtn: DropDownButtonComponent;
public items: ItemModel[] = [
  // Item definitions
];

Step 2: Implement Mouse Event Handlers

Create methods to handle mouse enter and leave events:

public open(args) {
  args.element.parentElement.addEventListener("mouseleave", this.onMouseLeave);
}

public onMouseEnter() {
  let dropDownButton: DropDownButtonComponent = getComponent(document.getElementById("drpdown"), "dropdown-btn");
  dropDownButton.toggle();
}

public onMouseLeave(event) {
  if (!event.relatedTarget.classList.contains("e-item") && event.relatedTarget.tagName != "UL") {
    let dropDownButton: DropDownButtonComponent = getComponent(document.getElementById("drpdown"), "dropdown-btn");
    dropDownButton.toggle();
  }
}

Step 3: Add Event Listeners to the Template

Define the DropDownButton in your component’s HTML template with on-mouseenter and on-mouseleave event bindings.

<button ejs-dropdownbutton #drpdown [items]='items' (open)="open($event)" (mouseover)="onMouseEnter($event)" iconcss="e-ddb-icons e-profile"></button>

Output Sample

For a live example and code, you can refer to the provided StackBlitz sample: Hover-Based Popup for DropdownButton.

Additional References

Syncfusion EJ2 Angular Split Buttons documentation: https://ej2.syncfusion.com/angular/documentation/split-button/getting-started/
Angular Event Binding: https://angular.io/guide/event-binding

For a live example and code, you can refer to the provided StackBlitz sample: https://stackblitz.com/edit/angular-zcvrdx-idhtrj?file=src%2Fapp.component.ts

By following these steps, you can create a DropDownButton in your Angular application that opens a popup on mouse hover and closes it when the mouse leaves the component area.

Conclusion

I hope you enjoyed learning about how to implement Hover-Based Popup in Angular DropdownButton.

You can refer to our Angular Dropdown feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Angular Dropdown example to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!

Did you find this information helpful?

Yes

Comments (0)