New to Kendo UI for Angular? Start a free 30-day trial

Programmatic Control

The PopoverAnchor and the PopoverContainer directives allow you to programmatically control their corresponding popovers.

PopoverAnchor Programmatic Control

The PopoverAnchor directive exposes the following API methods to enable programmatic popover control:

  • show—Displays the popover associated with the anchor.
  • hide—Hides the popover associated with the anchor, if it is currently displayed.
  • toggle—Toggles the popover associated with the anchor.

To control the visibility of the Popover only programmatically, set the showOn option of the PopoverAnchor to none.

The following example demonstrates the PopoverAnchor methods in action.

Example
View Source
Change Theme:

PopoverContainer Programmatic Control

The PopoverContainer directive exposes the following API methods to enable programmatic popover control:

  • show—Displays the popover associated with the container. The show method accepts as a parameter, the specific element inside the container, to be used as a popover anchor.
  • hide—Hides the popover, if it is currently displayed on any anchor inside the container.
  • toggle—Toggles the popover. The toggle method takes as a parameter, the specific element inside the container, to be used as a popover anchor.

To control the visibility of the Popover only programmatically, set the showOn option of the PopoverContainer to none.

The following example demonstrates the PopoverContainer methods in action.

Example
View Source
Change Theme: