All Components

PopupComponent

Represents the Kendo UI Popup component for Angular.

@Component({
selector: 'my-app',
template: `
 <button #anchor (click)="show=!show">Toggle</button>
 <kendo-popup *ngIf="show" [anchor]="anchor">
     <strong>Popup content!</strong>
 </kendo-popup>
`
})
class AppComponent {
  public show: boolean = false;
}

Selector

kendo-popup

Inputs

anchor ElementRef

Specifies the element that will be used as an anchor. The Popup opens next to that element.

For more information, refer to the section on
Anchor.

animate boolean

Controls the Popup animation. By default, the open and close animations are enabled.

For more information, refer to the section on
Animation Control.

offset OffsetPosition

Specifies the absolute position of the element. The Popup opens next to that point.

The Popup pivot point is defined by the popupAlign configuration option.
The boundary detection is applied by using the Window view port.

The Offset type includes:

  • offset.left—Defines the left position of the Popup.
  • offset.top—Defines the top position of the Popup.

For more information, refer to the section on
Static Alignment.

popupClass string

Specifies a list of CSS classes to be added to the internal animated element.

If the content of the Popup needs to be styled, use this property binding.

For more information, refer to the section on
Appearance Control.

anchorAlign object

Specifies the anchor pivot point.

anchorAlign.horizontal - String(default: "left")

Specifies the horizontal alignment point of the anchor.

The available options are:

  • left—Uses the leftmost point of the anchor element.
  • center—Uses the center point of the anchor element.
  • right—Uses the rightmost point of the anchor element.

anchorAlign.vertival - String(default: "bottom")

Specifies the vertical alignment point of the anchor.

The available options are:

  • top—Uses the top point of the anchor element.
  • center—Uses the center point of the anchor element.
  • bottom—Uses the bottom point of the anchor element.

For more information, refer to the section on
Positioning.

collision object

Configures the collision behavior of the Popup.

collision.horizontal - String(default: "fit")

Defines the horizontal position of the Popup when it is not fully visible.

The available options are:

  • fit—Moves the Popup horizontally until it is fully displayed in the view port.
  • flip—Flips the Popup position based on the origin and the position properties.

collision.vertical - String(default: "flip")

Defines the vertical position of the Popup when it is not fully visible.

The available options are:

  • fit—Moves the Popup vertically until it is fully displayed in the view port.
  • flip—Flips the Popup position based on the origin and position properties.

For more information, refer to the section on
Collisions.

popupAlign object

Specifies the pivot point of the Popup.

popupAlign.horizontal - String(default: "left")

Specifies the horizontal alignment point of the Popup.

The available options are:

  • left—Uses the leftmost point of the Popup element.
  • center—Uses the center point of the Popup element.
  • right—Uses the rightmost point of the Popup element.

popupAlign.vertival - String(default: "top")

Specifies the vertical alignment point of the Popup.

The available options are:

  • top—Uses the top point of the Popup element.
  • center—Uses the center point of the Popup element.
  • bottom—Uses the bottom point of the Popup element.

For more information, refer to the section on
Positioning.

Events

anchorViewportLeave EventEmitter

The anchorViewportLeave event is triggered when the anchor
is scrolled outside the screen boundaries.

For more information, refer to the section on
On Scrolling outside the Viewport.

close EventEmitter

The close event is triggered after the component is closed.

open EventEmitter

The open event is triggered after the component is opened and the open animation ends.

In this article