Exploring Angular CDK: Creating Context Menu & Text Popover

This is cross posted from original location https://angular-material.dev/articles/exploring-cdk-context-menu-text-popover. This article contains live playable demos, I recommend that you read it on it's original location.

Angular CDK

@angular/cdk, also known as the Angular Component Dev Kit, is a library that provides a set of building blocks for creating UI components in Angular applications. It offers functionalities that are not directly visual components themselves, but rather assist in building those components.

Here are some of the key features of @angular/cdk:

• Accessibility: It includes utilities to help developers create components that are accessible to users with disabilities, such as screen reader support and focus management
• Layout: Provides tools for managing layout based on factors like viewport size and direction (RTL/LTR)
• Behavior: Offers functionalities like working with the clipboard, managing collections, and creating step-through processes
• Portal: The portals package provides a flexible system for rendering dynamic content into an application
• Overlay: The overlay package provides a way to open floating panels on the screen
• and many more.

For this article, we will focus on overlay package, and we will see that it's possible to create context-menus and text-popovers using the same.

TL;DR

If you're simple interested in Demo and code, jump to that section.

Overlay package

The overlay package provides a set-of very useful directives, which helps to create floating panels easily without much code.

To see a simple demo, take a look at the examples at the official docs

As you can see, with a very few lines of code, we can achieve a simple floating panel, which is shown with respect to a trigger button.

Context menu

Context menus are the floating panels which can be shown when user right-clicks. So, instead of default browser menu on bigger screens, we can show a custom menu with useful actions.

For example, you would have seen context menus when you right click anywhere in Google drive or in Figma.

We can create such context-menu thanks to the overlay package.

For this article, we want to create a context-menu using <mat-menu> (is a floating panel containing list of options). The reason behind using <mat-menu> is because it already has the Material styles applied to it, closing and opening animations are built-in and it also has a wide verity of API support available.

Now, there is a separate package called @angular/cdk/menu, which has a special directive to handle context menus called cdkContextMenuTriggerFor. But, it is not possible to open the official Angular Material Menu component through that directive yet. Hence, we need to follow a more controlled way through overlay package.

So, to open <mat-menu> on right-click, we need to follow below approach:

1. Create a desired menu using <mat-menu>
2. Create a <button> trigger using [matMenuTriggerFor], which will open that <mat-menu>
3. Figure out the position where user have right-clicked and create a cdkOverlayOrigin at that position
4. Attach trigger button dynamically at above origin using cdkConnectedOverlay
5. Open the <mat-menu> once the trigger is attached using MatMenuTrigger.openMenu

Once you have followed above steps, you can easily open the Material menu on right click.

You can also control in which area user clicks, and perform various actions. For example, play around with below sample google drive like card. Observe that it only opens up the menu when you right click anywhere inside the card, and when the context-menu is opened, it adds a highlighting style to the card.

Text popover

The next feature we are going to look at, is text popover. It is a popover which should be visible once use selects the text.

For example, you would have seen text popover when you select any text in Medium.

We want to create such popovers using the overlay package. We can follow below approach:

1. Create a desired popover layout and content
2. Figure out a way to identify when user selects any text
3. Find out a suitable position, preferably center of the selected text's DOMRect
4. Create a cdkOverlayOrigin at that position
5. Attach popover dynamically with above origin, using cdkConnectedOverlay

As a result after all those steps, you can easily create a popover like below.

Once you have the core logic, you can create any type of popover, for example with a <mat-button-toggle> like below:

Or, even a medium like popover:

Demos and Codes

The demos are available at below links:

The code is available for a nominal price on our storefront on lemonsqueezy.