Angular CDK and Popover

With CS 343’s final project beginning, I have looked into some ways of displaying data. For this week, I will focus on Angular’s CDK. In Netanel Basal’s article “Creating Powerful Components with Angular CDK,” Basal describes the process of making an overlay in angular. He starts with creating a Popover service, Popover being a component from the CDK. This component is used for creating popup overlays, such as info that pops up while the mouse is hovering over something. Basal then creates the PopoverRef and its Injector. The PopoverRef is then injected into a ComponentPortal which is then attached the origin page. Portals dynamically render UI to the page. For the portal, the author creates a custom component to receive the contents to be displayed and how to render them. The article then covers three types of content the PopoverComponent can receive: text, template, and component. With that, the article’s example is completed. Now let us get a little more in-depth.

Let’s start with the Popover service. This service creates an open() method that creates the overlay, its contents, and its injector. This service is injected into the Popover component, where the open() method is utilized in a show() method in the app component that is called on when a button is clicked in the root component HTML. From what I understand, this service handles the creation of all the parts needed to make the popover with an open() method.

Next up is the PopoverRef, a class that receives a overlayRef, content, and data, and creates a close() method to dispose of the overlay. It seems that this class is used for the storage of the parent overlay, the content, and the data, and the close() method that removes the popover.

Since Basal wanted to use a custom component, he needed to create an Injector for it. The injector is created in the Popover service in a createInjector() method, which converts the custom injector to a PortalInjector.

The author then attaches the soon-to-be-created Popover component to the overlayRef in the popover service. This is done by overlayRef’s attach() method, where a new ComponentPortal containing the PopoverComponent is attached to the overlayRef.

The Popover component’s job is simple, just to inject the popoverRef and render its contents. This article’s example provides multiple rendering methods depending on content type. The three content types being template, component, and text.

For all three types, a show() method is added to app component that injects PopoverComponent and creates a Popover from popover service. The only difference between the content type’s show() is what the content in Popover is set to. This method is called on in the app component’s HTML where it is attached to a button.

Reading through this article and examining its code has helped me towards learning how to create popup overlays. I feel I have a more solid grasp of how angular components interact with each other. I will undoubtedly use knowledge I gained from the article, “Creating Powerful Components with Angular CDK” by Netanel Basal, in my final project.

Article Referenced:

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

Create your website with
Get started
%d bloggers like this: