Utilizing the CDK Overlay, a "popover" is displayed when a user hovers over an item in a list. Currently, the popover opens upon triggering the mouseenter event.
Here is the code snippet:
//component.html
<mat-list-item *ngFor="let item of itemList" (mouseenter)="showItemDetail(item)">
{{item.display}}
</mat-list-item>
//component.ts
showItemDetail(item: IItemDto, event: MouseEvent) {
this.hideItemDetail(); // Closes any open overlays
this.itemDetailOverlayRef = this.itemDetailOverlayService.open(item);
}
//itemDetailOverlayService.ts
open(item: IItemDto) {
// Returns an OverlayRef (which is a PortalHost)
const overlayRef = this.createOverlay(item);
const dialogRef = new ItemDetailOverlayRef(overlayRef);
// Create ComponentPortal that can be attached to a PortalHost
const itemDetailPortal = new ComponentPortal(ItemDetailOverlayComponent);
const componentInstance = this.attachDialogContainer(overlayRef, item, dialogRef);
// Attach ComponentPortal to PortalHost
return dialogRef;
}
private attachDialogContainer(overlayRef: OverlayRef, item: IItemDto, dialogRef: ItemDetailOverlayRef) {
const injector = this.createInjector(item, dialogRef);
const containerPortal = new ComponentPortal(ItemDetailOverlayComponent, null, injector);
const containerRef: ComponentRef<ItemDetailOverlayComponent> = overlayRef.attach(containerPortal);
return containerRef.instance;
}
It's important to note that the overlay relies on data from the list items.
Is there a way to delay the showItemDetail() function so that the overlay opens only after 2 seconds? Consider that only one popover should be open at a time.
Using setTimeout() won't suffice as multiple popovers may open if the user drags the mouse across the list of items.