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

Accessible in templates as #kendoPopupInstance="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 the
anchor.

anchorAlign Align

Specifies the anchor pivot point.

For more information, refer to the section on
positioning.

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.

collision Collision

Configures the collision behavior of the Popup.

For more information, refer to the section on
collisions.

offset Offset

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 viewport.

For more information, refer to the section on
static alignment.

popupAlign Align

Specifies the pivot point of the Popup.

For more information, refer to the section on
positioning.

popupClass string | Array | Object

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.

Events

anchorViewportLeave EventEmitter

Fires when the anchor is scrolled outside the screen boundaries.

For more information, refer to the section on
scrolling outside the viewport.

close EventEmitter

Fires after the component is closed.

open EventEmitter

Fires after the component is opened and the open animation has ended.

In this article