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

Export Name

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
aligning to specific components.

anchorAlign Align

Specifies the anchor pivot point.

For more information, refer to the section on
positioning.

animate boolean | PopupAnimation

Controls the Popup animation. By default, the opening and closing animations are enabled.

For more information about controlling the Popup animations,
refer to the article on animations.

collision Collision

Configures the collision behavior of the Popup.

For more information, refer to the article on
viewport boundary detection.

copyAnchorStyles boolean

Controls whether the component will copy the anchor font styles.

margin Margin

Specifies the margin value that will be added to the popup dimensions in pixels
and leaves a blank space between the popup and the anchor.

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
aligning to specific absolute points.

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 that will be added to the internal animated element.

To style the content of the Popup, use this property binding.

For more information, refer to the article on
styling.

positionMode PositionMode

Specifies the position mode of the component.
By default, the Popup uses fixed positioning.
To make the Popup acquire absolute positioning, set this option to absolute.

If you need to support mobile browsers with the zoom option,
use the absolute positioning of the Popup.

<style>
 .parent-content {
    position: relative;
    width: 200px;
    height: 200px;
    overflow: auto;
    margin: 200px auto;
    border: 1px solid red;
 }
 .content {
    position: relative;
    width: 100px;
    height: 100px;
    overflow: auto;
    margin: 300px;
    border: 1px solid blue;
 }
 .anchor {
    position: absolute;
    top: 200px;
    left: 200px;
 }
</style>
@Component({
selector: 'my-app',
template: `
  <div class="example-config">
     Position mode:
     <label><input type="radio" value="fixed" [(ngModel)]="mode" /> Fixed</label>
     <label><input type="radio" value="absolute" [(ngModel)]="mode" /> Absolute</label>
  </div>
  <div class="example-config">
      Append to
      <label>
          <input type="radio" name="place" [value]="1" [(ngModel)]="checked" />
          Root component
      </label>
      <label>
          <input type="radio" name="place" [value]="2" [(ngModel)]="checked" />
          <span style="color: red">Red Container</span>
      </label>
      <label>
          <input type="radio" name="place" [value]="3" [(ngModel)]="checked" />
          <span style="color: blue">Blue Container</span>
      </label>
  </div>
  <div class="example">
    <div class="parent-content" [scrollLeft]="250" [scrollTop]="230">
        <div class="content" [scrollLeft]="170" [scrollTop]="165">
          <button #anchor class="anchor" (click)="show = !show">Toggle</button>
          <kendo-popup [positionMode]="mode" [anchor]="anchor" (anchorViewportLeave)="show=false" *ngIf="show && checked === 3">
            <ul>
                <li>Item1</li>
                <li>Item2</li>
                <li>Item3</li>
            </ul>
          </kendo-popup>
          <span style="position: absolute; top: 400px; left: 400px">Bottom/Right</span>
        </div>
        <kendo-popup [positionMode]="mode" [anchor]="anchor" (anchorViewportLeave)="show=false" *ngIf="show && checked === 2">
          <ul>
              <li>Item1</li>
              <li>Item2</li>
              <li>Item3</li>
          </ul>
        </kendo-popup>
        <span style="position: absolute; top: 600px; left: 600px">Bottom/Right</span>
    </div>
    <kendo-popup [positionMode]="mode" [anchor]="anchor" (anchorViewportLeave)="show=false" *ngIf="show && checked === 1">
      <ul>
          <li>Item1</li>
          <li>Item2</li>
          <li>Item3</li>
      </ul>
    </kendo-popup>
  </div>
`
})
class AppComponent {
  public checked: number = 3;
  public mode: string = 'absolute';
  public show: boolean = true;
}

Events

anchorViewportLeave EventEmitter

Fires when the anchor is scrolled outside the screen boundaries.
For more information, refer to the section on
closing the Popup after leaving the viewport.

close EventEmitter

Fires after the component is closed.

open EventEmitter

Fires after the component is opened and the opening animation ends.

positionChange EventEmitter

Fires after the component is opened and the Popup is positioned.

In this article