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.
(see example).

anchorAlign Align

Specifies the anchor pivot point
(see example).

animate boolean | PopupAnimation

Controls the Popup animation. By default, the opening and closing animations
are enabled (see example).

collision Collision

Configures the collision behavior of the Popup
(see example).

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 (see example).

offset Offset

Specifies the absolute position of the element
(see example).
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.

popupAlign Align

Specifies the pivot point of the Popup
(see example).

popupClass string | Array | Object

Specifies a list of CSS classes that will be added to the internal
animated element (see example).

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

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.
(see example).

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