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.

@Component({
  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.
        </div>
      </kendo-popup>
  `,
  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