All Components

Hidden Popup

The Popup enables you to control its visibility.

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

To hide the Popup when the anchor is scrolled outside the screen boundaries, refer to the article on viewport boundary detection.

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

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