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.

<style>
  .content {
    padding: 30px;
    color: #787878;
    background-color: #fcf7f8;
    border: 1px solid rgba(0,0,0,.05);
  }
</style>
@Component({
  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.
      </kendo-popup>
  `
})
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