New to Kendo UI for Angular? Start a free 30-day trial

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

NameTypeDefaultDescription

anchor

HTMLElement | ElementRef<any>

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 | Object | string[]

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'" [style.top.px]="400" [style.left.px]="400">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'" [style.top.px]="600" [style.left.px]="600">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

NameTypeDescription

anchorViewportLeave

EventEmitter<any>

Fires when the anchor is scrolled outside the screen boundaries. (see example).

close

EventEmitter<any>

Fires after the component is closed.

open

EventEmitter<any>

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

positionChange

EventEmitter<any>

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

In this article

Not finding the help you need?