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.

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

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

In this article

Not finding the help you need?