All Components

Popup Overview

The Popup positions a content next to a specific anchor component.

Figure 1: A left-aligned template of the Popup

Left-Aligned template of the Kendo UI Popup for React

Basic Usage

The following example demonstrates the Popup in action.

<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

  1. The Popup package is published on the Progress NPM Registry. To set up your access, follow the steps in Installation.

  2. Download and install the package:

    npm install --save @progress/kendo-angular-popup
  3. Once installed, import the PopupModule in your application root module:

    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 {
    }

Dependencies

The Popup package requires the following peer dependencies that have to be installed by your application:

  • @angular/common
  • @angular/core
  • rxjs

The following dependencies will be installed automatically:

  • @progress/kendo-popup-common

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.

Figure 2: A right-aligned Popup

Right-Aligned Kendo UI Popup for React

@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: "right", vertical: "bottom" };
    private popupAlign: Align = { horizontal: "right", 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