New to Kendo UI for Angular? Start a free 30-day trial
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 thetitleproperty, the template will take precedence.kendoPopoverBodyTemplate—Specifies the contents of the Popover body section. If provided together with thebodyproperty, 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-anchortemplate variable.
The following example demonstrates the Popover templates in action.
Change Theme
Theme
Loading ...
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:
- Utilize the
templateDataproperty which accepts a callback of typePopoverDataFn.
ts
<kendo-popover ... [templateData]="getContextData">
</kendo-popover>- 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.
ts
public getContextData = (anchor: Element) => {
return {
foo: "bar"
}
}- Nest a template inside the Popover and consume the data through the
let-datatemplate variable syntax.
ts
<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.
Change Theme
Theme
Loading ...