PopupComponent
Represents the Kendo UI Popup component for Angular.
Definition
Package:@progress/kendo-angular-popup
Selector:kendo-popup
Export Name:Accessible in templates as #kendo-popupInstance="kendo-popup"
Syntax:
<button #anchor (click)="show = !show">Toggle</button>
@if (show) {
<kendo-popup [anchor]="anchor">
<strong>Popup content!</strong>
</kendo-popup>
}Inputs
anchor
HTMLElement | ElementRef<any>
Sets the element to use as an anchor. The Popup opens next to this element. (See example).
Sets the anchor pivot point (see example).
animate
boolean | PopupAnimation
Controls the Popup animation. By default, the opening and closing animations are enabled (see example).
true
Sets the collision behavior of the Popup (see example).
copyAnchorStyles
boolean
Controls whether the component copies the anchor font styles.
false
Sets the margin value in pixels. Adds blank space between the Popup and the anchor (see example).
Sets the absolute position of the element (see example).
The Popup opens next to this point. The Popup pivot point is defined by the popupAlign option. The boundary detection uses the window viewport.
DEFAULT_OFFSET
Sets the pivot point of the Popup (see example).
popupClass
string | object | string[] | Set<string>
Sets a list of CSS classes to add to the internal animated element (see example).
To style the content of the Popup, use this property binding.
Sets the position mode of the component. By default, the Popup uses fixed positioning. To use absolute positioning, set this option to absolute.
To support mobile browsers with the zoom option, use the absolute positioning of the Popup.
'fixed'
Events
Fires when the anchor scrolls outside the screen boundaries. (See example).
close
EventEmitter<any>
Fires after the component closes.
open
EventEmitter<any>
Fires after the component opens and the opening animation ends.
Fires after the component is opened and the Popup is positioned.