Popover Templates

The Popover allows you to use templates to customize its appearance.

To define a template, nest an <ng-template> tag inside the <kendo-popover> tag and apply one of the following directives to it:

• kendoPopoverTitleTemplate—Specifies the contents of the Popover title section. If provided together with the title property, the template will take precedence.
• kendoPopoverBodyTemplate—Specifies the contents of the Popover body section. If provided together with the body property, the template will take precedence.
• kendoPopoverActionsTemplate—Specifies the contents of the Popover action buttons section. If this template is not provided, the section will not be displayed.

The current anchor element, that the user interacted with, is accessible in the templates through the let-anchor template variable.

The following example demonstrates the Popover templates in action.

Passing Data to Templates

The Popover enables you to pass custom data via callback to its templates. This allows you to render complex layouts or to display different data depending on the specific element that the user interacted with.

To pass custom data to the Popover templates:

1. Utilize the templateData property which accepts a callback of type PopoverDataFn.

Copy Code<kendo-popover ... [templateData]="getContextData">
</kendo-popover>

2. Define the callback function, which should return the custom data in any format. It accepts the current anchor element as a parameter, which allows you to determine the corresponding data for it.

Copy Codepublic getContextData = (anchor: Element) => {
    return {
        foo: "bar"
    }
}

3. Nest a template inside the Popover and consume the data through the let-data template variable syntax.

Copy Code<ng-template kendoPopoverBodyTemplate let-anchor let-data="data">
    <div>{{ data.foo }}</div>
</ng-template>

The following example demonstrates how to pass data to the Popover templates.

Suggested Links

• Read more about the Popover configuration
• API Reference of the PopoverContainer