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

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 opening and closing 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
viewport boundary detection.

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

For styling the content of the Popup, use this property binding.

For more information, refer to the section on
styling.

positionMode PositionMode

Specifies the position mode of the component. By default the Popup uses fixed mode.
Set the option to absolute to use an absolute positioning.

Use the 'absolute' positioning if mobile browsers with zoom support is targeted.

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

In this article