Anchor issue with popup

1 Answer 1374 Views
Popup
Srinivas
Top achievements
Rank 2
Iron
Veteran
Iron
Srinivas asked on 21 May 2021, 03:38 PM

Hi Team,

I attached my project with this question.

Can you look at the problem of anchor giving the error "Property 'nativeElement' is missing in type 'HTMLButtonElement' but required in type 'ElementRef<any>'"

StockBlitz also working fine. Only one doubt is Angular CLI version.

https://stackblitz.com/edit/angular-5yvop3-ddr4c8?file=app%2Fapp.component.ts

I'm using Angular CLI v12

Can you check the attached project and solve the issue!

 

<div class="example-config">
  <button #anchor (click)="onToggle()" class="k-button">
    {{ toggleText }} Popup
  </button>
</div>
<kendo-popup [anchor]="anchor" (anchorViewportLeave)="show = false" *ngIf="show">
  <div class="content">
    <!-- User-defined content -->
    Popup content.
  </div>
</kendo-popup>

 

Regards,

Srinivas M.P.

1 Answer, 1 is accepted

Sort by
1
Accepted
Yanmario
Telerik team
answered on 25 May 2021, 03:10 PM

Hi Srinivas,

Thank you for the provided information.

Indeed there is an issue with the anchor and template type checking, specifically strictTemplates flags in TypeScript. This issue is known and logged in our public GitHub repository where it can be tracked:

https://github.com/telerik/kendo-angular/issues/2865

In the meantime, the following workaround has to be used:

[anchor]="$any(anchor)"

or

[anchor]="{ nativeElement: anchor }"

Please accept our apologies for the inconvenience caused until the issue is resolved.

Regards,
Yanmario Menev
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Srinivas
Top achievements
Rank 2
Iron
Veteran
Iron
commented on 26 May 2021, 10:56 AM

Thanks for you support..!

When Telerik know this issue then why not they added this in documentation?
Again and again I'm facing the same issues.
Number of points not covered in documentation.
Because of this my development getting delay.
Yanmario
Telerik team
commented on 31 May 2021, 09:16 AM

Hi, Srinivas

We do our best to fix issues as soon as possible, but it takes time to be addressed and fixed. The newer Angular 12 uses strictTemplates by default, and our development team is currently discussing and working on updating the demos to include stricTemplates to avoid such issues. In older versions of Angular <11, strictTemplates is optional, and the demos were running as expected without errors. Thank you for your patience.

Regards,
Yanmario Menev

Tags
Popup
Asked by
Srinivas
Top achievements
Rank 2
Iron
Veteran
Iron
Answers by
Yanmario
Telerik team
Share this question
or