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).
Specifies which point on the anchor element the Popup attaches to. Use this together with popupAlign to control where the Popup appears relative to its anchor (see example).
'{ horizontal: "left", vertical: "bottom" }'
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).
'{ horizontal: "fit", vertical: "flip" }'
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.
'{ left: -10000, top: 0 }'
Specifies which point on the Popup connects to the anchor's align point. Use this together with anchorAlign to fine-tune how the Popup is positioned (see example).
'{ horizontal: "left", vertical: "top" }'
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
anchorViewportLeave
EventEmitter<any>
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.
positionChange
EventEmitter<any>
Fires after the component is opened and the Popup is positioned.