Angular Popup Overview

The Kendo UI for Angular Popup enables you to position a piece of content next to a specific anchor component.

The Popup is built from the ground up and specifically for Angular, so that you get a high-performance control which integrates tightly with your application and with the rest of the Kendo UI for Angular components.

The Popup Package is part of Kendo UI for Angular, a professional grade UI library with 110+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.

Angular Popup Example

View Source
Change Theme:

Angular Popup Key Features

The Kendo UI for Angular Popup component delivers a range of handy and developer-friendly features whose number and further development are not limited by the list in this section. The Kendo UI for Angular team constantly invests efforts to improve the performance and add more value to the existing Popup library as well as develop new features to it.


You can customize the animation of the Popup and change its direction, type, and duration, or disable it. Read more about how to control the animations of the Popup...

Aligning and Positioning

The Popup enables you to align it to components and absolute points as well as to control its position and render a margin according to a specific elements. Read more about the positioning options of the Popup...

Hidden State

You can control the Popup visibility by setting the *ngIf directive to a Boolean value. Read more about the hidden state of the Popup...


You can also close the Popup after leaving the viewport, and on document or Esc click by handling the corresponding event. Read more about how to close the Popup...

Document Scale Support

The Popup provides configuration options for declaring the document scale so that it gets properly positioned. Read more about the document scale support of the Popup...


You can customize the appearance of the host Popup element and the elements that hold its content as well as copy the anchor font styles of the content-holding element. Read more about the styling options of the Popup...

To learn more about the appearance, anatomy, and accessibility of the Popup, visit the Progress Design System documentation—an information portal offering rich component usage guidelines, descriptions of the available style variables, and globalization support details.

Viewport Boundary Detection

The Popup enables you to set its boundary detection functionality so that when it does not fit in the viewport, it will automatically change its position. Read more about the viewport boundary detection feature of the Popup...

Angular Service

You can create Popup instances from TypeScript based on user interactions and without the need to define the component in a template. Read more about how to show a Popup by using an Angular service...

Trial Version of Kendo UI for Angular

The Kendo UI for Angular Popup is part of the Kendo UI for Angular library. Kendo UI for Angular offers a 30-day trial with a full-featured version of the library—no restrictions! What’s more, you are eligible for full technical support during your trial period in case you have any questions. Sign up for a free 30-day trial of Kendo UI for Angular.

Support Options

For any questions about the use of the Kendo UI for Angular Popup, or any of our other components, there are several support options available:

  • Kendo UI license holders and anyone in an active trial can take advantage of the Kendo UI for Angular outstanding customer support delivered by the actual developers who built the library. To submit a support ticket, use the Kendo UI support system.
  • Kendo UI for Angular forums are part of the free support you can get from the community and from the Kendo UI team on all kinds of general issues.
  • Kendo UI for Angular feedback portal and Kendo UI for Angular roadmap provide information on the features in discussion and also the planned ones for release.
  • Kendo UI for Angular uses GitHub Issues as its bug tracker and you can submit any related reports there. Also, check out the closed list.
  • Of course, the Kendo UI for Angular team is active on StackOverflow as well and you can find a wealth of questions and answers there.
  • Need something unique that is tailor-made for your project? Progress offers its Progress Services group that can work with you to create any customized solution that you might need.

Support and Learning Resources

Additional Resources