All Components

Popup Overview

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

Basic Usage

The following example demonstrates the Popup in action.

<style>
  .content {
    padding: 30px;
    color: #787878;
    background-color: #fcf7f8;
    border: 1px solid rgba(0,0,0,.05);
  }
  .example-wrapper {
    min-height: 100px;
  }
</style>
@Component({
  selector: 'my-app',
  template: `
      <div class="example-config">
        <button #anchor (click)="onToggle()" class="k-button">{{toggleText}} Popup</button>
      </div>
      <div class="example-wrapper">
        <kendo-popup [popupClass]="'content popup'" [anchor]="anchor" (anchorViewportLeave)="show = false" *ngIf="show">
            <!-- User-defined content -->
                Popup content.
        </kendo-popup>
      </div>
  `
})
class AppComponent {
    private toggleText: string = "Hide";
    private show: boolean = true;

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

Installation

The latest versions of this package (v2 or later) require you to install RxJS v5.5 or later. Before you use the Popup component, run npm install --save rxjs@^5.5.

  1. Download and install the package:

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

    import { NgModule } from '@angular/core';
    import { BrowserModule } from '@angular/platform-browser';
    import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
    import { PopupModule } from '@progress/kendo-angular-popup';
    import { AppComponent } from './app.component';
    
    @NgModule({
       bootstrap:    [AppComponent],
       declarations: [AppComponent],
       imports:      [BrowserModule, BrowserAnimationsModule, PopupModule]
    })
    export class AppModule {
    }
  3. You are required to install one of the Kendo UI themes for Angular to style your component. For more information on how to add the styles, refer to the article on getting started.

Dependencies

The Popup package requires you to install the following peer dependencies in your application:

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

The following dependencies are automatically installed:

  • @progress/kendo-popup-common

The Popup package utilizes the Angular animation system, which supports a specific set of browsers.

Features and Functionalities

In this article