All Components

Popup Overview

The Kendo UI Popup for Angular is a component that positions a content next to a specific anchor component.

Demos

The following example demonstrates the default setup of the Popup.

<style>
  .content {
    padding: 10px;
    color: #787878;
    background-color: #fcf7f8;
    font-size: 13px;
    font-family: Helvetica, Arial, sans-serif;
    letter-spacing: 1px;
    text-align: center;
    border: 1px solid rgba(0,0,0,.05);
  }

  .popup {
    width: 100px;
    height: 70px;
  }

  .popup > ul {
      list-style-type: decimal;
      text-align: left;
  }
</style>
@Component({
  selector: 'my-app',
  template: `
      <button #anchor (click)="onToggle()">{{toggleText}}</button>
      <kendo-popup [popupClass]="'content popup'" [anchor]="anchor" (anchorViewportLeave)="show = false" *ngIf="show">
          <!-- User-defined content -->
          <ul>
              <li>Chai</li>
              <li>Chang</li>
              <li>Tofu</li>
          </ul>
      </kendo-popup>
  `
})
class AppComponent {
    private toggleText: string = "Hide Popup";
    private show: boolean = true;

    public onToggle(): void {
        this.show = !this.show;
        this.toggleText = this.show ? "Hide Popup" : "Show Popup";
    }
}

Installation

The Popup is published as a scoped package on the on the Progress NPM Registry (https://registry.npm.telerik.com/).

Install the package by using NPM.

To install the npm package, it is recommended to use the Node.js 5.0.0 or later versions.

   npm install --save @progress/kendo-angular-popup

Once installed, import the PopupModule in your application bootstrap.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { PopupModule } from '@progress/kendo-angular-popup';
import { AppComponent } from './app.component';

@NgModule({
    bootstrap:    [AppComponent],
    declarations: [AppComponent],
    imports:      [BrowserModule, PopupModule]
})
export class AppModule {
}

Configuration

Anchor

To align the Popup to a specific component, use the anchor property binding. The Popup opens next to the defined anchor component.

If no anchor is provided, the Popup will use the offset property value.

<style>
  .content {
    padding: 10px;
    color: #787878;
    background-color: #fcf7f8;
    font-size: 13px;
    font-family: Helvetica, Arial, sans-serif;
    letter-spacing: 1px;
    text-align: center;
    border: 1px solid rgba(0,0,0,.05);
  }

  .anchor {
    width: 80px;
    height: 40px;
  }

  .popup {
    width: 100px;
    height: 70px;
  }

  .popup > ul {
      list-style-type: decimal;
      text-align: left;
  }

  .example {
      display: flex;
      margin: auto 30px;
  }

  .example-content {
      margin: 200px auto;
  }
</style>
@Component({
  selector: 'my-app',
  template: `
    <div class="example">
        <div class="example-content">
          <span class="anchor content" #anchor>ANCHOR</span>
          <kendo-popup [anchor]="anchor" [popupClass]="'content popup'">
            <ul>
                <li>Chai</li>
                <li>Chang</li>
                <li>Tofu</li>
            </ul>
          </kendo-popup>
        </div>
    </div>
  `
})
class AppComponent { }

Static Alignment

To align the Popup to a specific static point, use the offset property binding. The Popup opens next to the static point and uses the specified popupAlign configuration.

<style>
  .content {
    padding: 10px;
    color: #787878;
    background-color: #fcf7f8;
    font-size: 13px;
    font-family: Helvetica, Arial, sans-serif;
    letter-spacing: 1px;
    text-align: center;
    border: 1px solid rgba(0,0,0,.05);
  }

  .popup {
    width: 100px;
    height: 70px;
  }

  .popup > ul {
      list-style-type: decimal;
      text-align: left;
  }
</style>
@Component({
  selector: 'my-app',
  template: `
      <kendo-popup class="content popup" [offset]="offset">
        <ul>
            <li>Chai</li>
            <li>Chang</li>
            <li>Tofu</li>
        </ul>
      </kendo-popup>
  `
})
class AppComponent {
    /* Change left or top value to reposition the popup */
    public offset: offset = { left: 100, top: 100 };
}

Visibility Control

To show or hide the Popup, use the *ngIf directive.

<style>
  .content {
    padding: 10px;
    color: #787878;
    background-color: #fcf7f8;
    font-size: 13px;
    font-family: Helvetica, Arial, sans-serif;
    letter-spacing: 1px;
    text-align: center;
    border: 1px solid rgba(0,0,0,.05);
  }

  .popup {
    width: 100px;
    height: 70px;
  }

  .popup > ul {
      list-style-type: decimal;
      text-align: left;
  }
</style>
@Component({
  selector: 'my-app',
  template: `
      <button #anchor (click)="onToggle()">Click</button>
      <kendo-popup [anchor]="anchor" [popupClass]="'content popup'" *ngIf="show">
        <ul>
            <li>Chai</li>
            <li>Chang</li>
            <li>Tofu</li>
        </ul>
      </kendo-popup>
  `
})
class AppComponent {
    private show: boolean = false;

    public onToggle(): void {
        this.show = !this.show;
    }
}

To hide the Popup when the anchor is scrolled outside the screen boundaries, refer to the section on scrolling outside the viewport`.

Collisions

To define the Popup boundary detection behavior, use the collision binding property. It specifies the behavior of the component when it does not fit in the view port.

By default, the Popup fits horizontally and flips vertically.

<style>
  .content {
    padding: 10px;
    color: #787878;
    background-color: #fcf7f8;
    font-size: 13px;
    font-family: Helvetica, Arial, sans-serif;
    letter-spacing: 1px;
    text-align: center;
    border: 1px solid rgba(0,0,0,.05);
  }

  .anchor {
    width: 80px;
    height: 40px;
    position: relative;
  }

  .popup {
    width: 100px;
    height: 70px;
  }

  .popup > ul {
      list-style-type: decimal;
      text-align: left;
  }

  .example {
      position: absolute;
  }
</style>
@Component({
  selector: 'my-app',
  template: `
    <div class="example" [style.top.px]="exampleTop">
      <div [style.position]="'relative'">
          <span #anchor class="anchor content" (click)="onToggle()">ANCHOR</span>
          <kendo-popup *ngIf="show" [anchor]="anchor" [collision]="collision" [popupClass]="'content popup'">
            <ul>
                <li>Chai</li>
                <li>Chang</li>
                <li>Tofu</li>
            </ul>
          </kendo-popup>
      </div>
    </div>
  `
})
class AppComponent {
    private collision: Collision = { horizontal: 'flip', vertical: 'fit' };

    /* Move the 'example' to the bottom to see the collision behavior */
    private exampleTop: number = 600;

    private show: boolean = false;
    public onToggle(): void {
        this.show = !this.show;
    }

}

Positioning

The positioning of the Popup is controlled by specific pivot points. Both the anchor and the Popup are treated as rectangular elements, so each has nine pivot points.

It is possible to align every Popup point to an anchor point. The Popup aligns to the anchor by using its own top-right point and the bottom-right point of the anchor.

@Component({
  selector: 'my-app',
  template: `
    <style>
      .app {
        margin: 120px 250px;
      }

      .content {
        padding: 10px;
        color: #787878;
        background-color: #fcf7f8;
        font-size: 13px;
        font-family: Helvetica, Arial, sans-serif;
        letter-spacing: 1px;
        text-align: center;
        border: 1px solid rgba(0,0,0,.05);
      }

      .anchor {
        display: inline-block;
        width: 80px;
      }

      .popup {
        width: 100px;
        height: 70px;
      }

      fieldset {
          position: absolute;
          right: 10px;
          top: 10px;
      }

      p {
        width: 300px;
      }
    </style>
    <div style="position: absolute, top: 0px">
        <h1>Positioning</h1>
        <p>Demo demonstrates to use different Align points to position a Popup next to an anchor.</p>
    </div>
    <div class="app">
        <div [style.display]="'inline-block'" [style.width.px]="200">
            <span #anchor class="anchor content">ANCHOR</span>
            <kendo-popup [anchor]="anchor" [anchorAlign]="anchorAlign" [popupAlign]="popupAlign" *ngIf="show">
                <div class="content popup">
                    <ul>
                        <li>Item1</li>
                        <li>Item2</li>
                        <li>Item3</li>
                    </ul>
                </div>
            </kendo-popup>
        </div>
        <fieldset [style.display]="'inline-block'" [style.width.px]="400">
            <div>
                <h4>Popup action</h4>
                <button (click)="onClick()">{{show ? 'Close' : 'Open'}}</button>
            </div>
            <hr />
            <div>
                <h4>Anchor Align Point</h4>
                <div>
                    <label>
                        Horizontal:
                        <select #anchorHorizontal [(ngModel)]="anchorAlign.horizontal">
                            <option value="left">Left</option>
                            <option value="center">Center</option>
                            <option value="right">Right</option>
                        </select>
                    </label>

                    <label>
                        Vertical:
                        <select #anchorVertical [(ngModel)]="anchorAlign.vertical">
                            <option value="top">Top</option>
                            <option value="middle">Middle</option>
                            <option value="bottom">Bottom</option>
                        </select>
                    </label>
                </div>
            </div>
            <div>
                <h4>Popup Align Point</h4>
                <div>
                    <label>
                        Horizontal:
                        <select #popupHorizontal [(ngModel)]="popupAlign.horizontal">
                            <option value="left">Left</option>
                            <option value="center">Center</option>
                            <option value="right">Right</option>
                        </select>
                    </label>

                    <label>
                        Vertical:
                        <select #popupVertical [(ngModel)]="popupAlign.vertical">
                            <option value="top">Top</option>
                            <option value="middle">Middle</option>
                            <option value="bottom">Bottom</option>
                        </select>
                    </label>
                </div>
            </div>
        </fieldset>
    </div>
  `
})
class AppComponent {
    private anchorAlign: Align = { horizontal: "left", vertical: "bottom" };
    private popupAlign: Align = { horizontal: "left", vertical: "top" };
    private show: boolean = false;

    private onClick(): void {
        this.show = !this.show;
    }
}

Animation Control

To disable the open or close Popup animation, use the animate directive.

<style>
  .content {
    padding: 10px;
    color: #787878;
    background-color: #fcf7f8;
    font-size: 13px;
    font-family: Helvetica, Arial, sans-serif;
    letter-spacing: 1px;
    text-align: center;
    border: 1px solid rgba(0,0,0,.05);
  }

  .anchor {
    width: 80px;
    height: 40px;
  }

  .popup {
    width: 100px;
    height: 70px;
  }

  .popup > ul {
      list-style-type: decimal;
      text-align: left;
  }
</style>
@Component({
  selector: 'my-app',
  template: `
      <button #anchor (click)="onToggle()">Click</button>
      <kendo-popup [animate]="false" [anchor]="anchor" [popupClass]="'content popup'" *ngIf="show">
        <ul>
            <li>Item1</li>
            <li>Item2</li>
            <li>Item3</li>
        </ul>
      </kendo-popup>
  `
})
class AppComponent {
    private show: boolean = false;

    public onToggle(): void {
        this.show = !this.show;
    }
}

Appearance Control

To style the host element of the Popup, just decorate the component element.

@Component({
  selector: 'my-app',
  template: `
      <style>
        .wrapper {
          background-color: red;
        }
      </style>
      <button #anchor (click)="onToggle()">Click</button>
      <kendo-popup [anchor]="anchor" class="wrapper" *ngIf="show">
        <ul>
            <li>Item1</li>
            <li>Item2</li>
            <li>Item3</li>
        </ul>
      </kendo-popup>
  `
})
class AppComponent {
    private show: boolean = false;

    public onToggle(): void {
        this.show = !this.show;
    }
}

To style the element that holds the content, use the popupClass property binding.

<style>
  .inner-wrapper {
      background-color: red;
  }

  .popup > ul {
      list-style-type: decimal;
      text-align: left;
  }
</style>
@Component({
  selector: 'my-app',
  template: `
      <button #anchor (click)="onToggle()">Click</button>
      <kendo-popup [anchor]="anchor" [popupClass]="'inner-wrapper'" *ngIf="show">
        <ul>
            <li>Item1</li>
            <li>Item2</li>
            <li>Item3</li>
        </ul>
      </kendo-popup>
  `
})
class AppComponent {
    private show: boolean = false;

    public onToggle(): void {
        this.show = !this.show;
    }
}

Events

On Scrolling Outside the Viewport

The anchorViewportLeave event is triggered when the anchor is scrolled outside the screen boundaries.

<style>
    .example {
        display: flex;
        position: relative;
        margin: auto 30px;
    }

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

    .popup {
        border: 1px solid;
    }
</style>
import { Component, ElementRef, Renderer } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
    <div class="example">
        <div style="position: absolute">
            <h1>Parent with overflow:scroll</h1>
        </div>
        <div class="parent-content" [scrollLeft]="250" [scrollTop]="250">
            <div class="content" [scrollLeft]="170" [scrollTop]="165">
              <button #anchor class="anchor" (click)="onToggle()">{{toggleText}}</button>
              <kendo-popup class="popup" [anchor]="anchor" (anchorViewportLeave)="close()" *ngIf="show">
                <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>
            <span style="position: absolute; top: 600px; left: 600px">Bottom/Right</span>
        </div>
    </div>
  `
})
class AppComponent {
    private toggleText: string = "Show";
    private show: boolean = false;

    public onToggle(): void {
        this.show = !this.show;
        this.toggleText = this.show ? "Hide" : "Show";
    }

    public close(): void {
        this.show = false;
    }

}
In this article