ANCHOR
            
        
      
    `,
    styles: [`
      .content {
        padding: 30px;
        color: #787878;
        background-color: #fcf7f8;
        border: 1px solid rgba(0,0,0,.05);
      }
      .anchor {
        width: 80px;
        height: 40px;
        cursor: pointer;
        position: relative;
      }
      .example {
        position: absolute;
      }
    `]
})
export class AppComponent {
    private collision: Collision = { horizontal: 'flip', vertical: 'fit' };

    /* Move the 'example' to the bottom to see the collision behavior */
    private exampleTop = 400;

    private toggleText = 'Show';
    private show = false;
    public onToggle(): void {
        this.show = !this.show;
    }

}
" class="demo-file-sc-s3r0g1-1 jgyKPC" data-language="ts" style="box-sizing:border-box;position:relative;overflow:auto;margin-top:0px;margin-bottom:0px;padding:1rem;background:rgb(248, 248, 248);border:0px;min-height:3rem;line-height:1.5;white-space:pre-wrap;color:#1f1f1f;">
Toggle Popup

        
    `
})
export class AppComponent {
    private show = true;
}
" class="demo-file-sc-s3r0g1-1 jgyKPC" data-language="ts" style="box-sizing:border-box;position:relative;overflow:auto;margin-top:0px;margin-bottom:0px;padding:1rem;background:rgb(248, 248, 248);border:0px;min-height:3rem;line-height:1.5;white-space:pre-wrap;color:#1f1f1f;">    <button #anchor kendoButton (click)="show = !show">Toggle Popup</button>
    <kendo-popup [anchor]="anchor" *ngIf="show">
      <div style="padding: 30px; background-color: #fcf7f8">Popup content.</div>
    </kendo-popup>

Directly referencing anchor like that will not work on any new Angular project - it will fail template type checks.
Type HTMLButtonElement is not assignable to type ElementRef 

By default, the reference is to the component and not to the ElementRef.
Without a custom directive, this would have to use 
@ViewChild("anchor", { read: ElementRef }) popupButtonEl: ElementRef;