Components / Popup

Closing

The Popup provides events which facilitate common use cases such as closing the component after leaving the viewport and on document or Esc click.

After Leaving the Viewport

The anchorViewportLeave event is triggered when the anchor is scrolled outside the screen boundaries. When the anchor is not visible, use anchorViewportLeave to close the Popup—otherwise, it will remain visible within the screen boundaries.

The control over the visibility of the Popup depends on you. As a result, when the container is scrolled, the Popup will not close automatically.

import { Component, ElementRef, Renderer2 } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
    <div class="example">
        <div style="position: absolute">
            <h4>Parent with overflow:scroll</h4>
        </div>
        <div class="parent-content" [scrollLeft]="250" [scrollTop]="250">
            <div class="content" [scrollLeft]="170" [scrollTop]="165">
              <button #anchor class="anchor k-button" (click)="onToggle()">Click me!</button>
              <kendo-popup class="popup" [anchor]="anchor" (anchorViewportLeave)="close()" *ngIf="show">
                <div class="popup-content">
                  Popup content.
                </div>
              </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>
  `,
  styles: [`
    .example {
        display: flex;
        position: relative;
        margin: auto 30px;
    }
    .parent-content {
        position: relative;
        width: 300px;
        height: 300px;
        overflow: auto;
        margin: 100px auto;
        border: 2px solid #5ec232;
    }
    .content {
        position: relative;
        width: 200px;
        height: 200px;
        overflow: auto;
        margin: 300px;
        border: 2px solid #3e80ed;
    }
    .popup-content {
        padding: 30px 20px;
        color: #787878;
        background-color: #fcf7f8;
        border: 1px solid rgba(0,0,0,.05);
    }

    .anchor {
        position: absolute;
        top: 200px;
        left: 200px;
    }
  `]
})
class AppComponent {
    private show: boolean = false;

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

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

}

On Document Click or Escape

To close the Popup when the user clicks outside its boundaries, wire the document.click event and determine whether the Popup was clicked. If clicked, the Popup remains open.

The control over the visibility of the Popup depends on you. As a result, upon a document click or Esc press, the Popup will not close automatically.

import { Component, ElementRef, HostListener, ViewChild, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'my-app',
  styles: [`
      .content {
        padding: 30px;
        color: #787878;
        background-color: #fcf7f8;
        border: 1px solid rgba(0,0,0,.05);
      }
  `],
  template: `
      <button #anchor (click)="toggle()" class="k-button">{{toggleText}} Popup</button>
      <kendo-popup #popup [anchor]="anchor" popupClass="content" *ngIf="show">
        Popup content.
      </kendo-popup>
  `,
  encapsulation: ViewEncapsulation.None
})
export class AppComponent {
    private toggleText = 'Show';
    private show = false;

    @ViewChild('anchor') public anchor: ElementRef;
    @ViewChild('popup', { read: ElementRef }) public popup: ElementRef;

    @HostListener('keydown', ['$event'])
    public keydown(event: any): void {
        if (event.keyCode === 27) {
            this.toggle(false);
        }
    }

    @HostListener('document:click', ['$event'])
    public documentClick(event: any): void {
        if (!this.contains(event.target)) {
          this.toggle(false);
        }
    }

    public toggle(show?: boolean): void {
        this.show = show !== undefined ? show : !this.show;
        this.toggleText = this.show ? 'Hide' : 'Show';
    }

    private contains(target: any): boolean {
        return this.anchor.nativeElement.contains(target) ||
            (this.popup ? this.popup.nativeElement.contains(target) : false);
    }
}


import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { BrowserModule } from '@angular/platform-browser';
import { PopupModule } from '@progress/kendo-angular-popup';

import { AppComponent } from './app.component';

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


import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app.module';

enableProdMode();

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

In this article