Completed
Last Updated: 03 May 2022 14:08 by ADMIN
Created by: Mauro
Comments: 2
Category: Popup
Type: Bug Report
1
        
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;