PopupComponent

Represents the Kendo UI Popup component for Angular.

html

<button #anchor (click)="show = !show">Toggle</button>
<kendo-popup *ngIf="show" [anchor]="anchor">
  <strong>Popup content!</strong>
</kendo-popup>

Selector

kendo-popup

Export Name

Accessible in templates as #kendoPopupInstance="kendo-popup"

Inputs

Name	Type	Default	Description
anchor	ElementRef<any> | HTMLElement		Sets the element to use as an anchor. The Popup opens next to this element. (See example).
anchorAlign	Align	'{ horizontal: "left", vertical: "bottom" }'	Sets the anchor pivot point (see example).
animate	boolean | PopupAnimation	true	Controls the Popup animation. By default, the opening and closing animations are enabled (see example).
collision	Collision	'{ horizontal: "fit", vertical: "flip" }'	Sets the collision behavior of the Popup (see example).
copyAnchorStyles	boolean	false	Controls whether the component copies the anchor font styles.
margin	Margin		Sets the margin value in pixels. Adds blank space between the Popup and the anchor (see example).
offset	Offset	'{ left: -10000, top: 0 }'	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.
popupAlign	Align	'{ horizontal: "left", vertical: "top" }'	Sets the pivot point of the Popup (see example).
popupClass	string | Object | 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.
positionMode	PositionMode	'fixed'	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.

Events

Name	Type	Description
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.