PopupComponent

Represents the Kendo UI Popup component for Angular.

ts

@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

Name	Type	Default	Description
anchor	ElementRef<any> | HTMLElement		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. html <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> ts @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

Name	Type	Description
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.