Kendo-angular: [PopupSettings] extend type of anchor property

[destus90]

In PopupSettings the type of anchor property is ElementRef, but HTMLElement type is a working case too. I had some investigation on it and found that Kendo uses the following unwrap method in dom.service:

public nativeElement(el: ElementRef): HTMLElement {
  if (!el) { return null; }

  return el.nativeElement || el;
}

https://stackblitz.com/edit/angular-gwiipe?file=app/app.component.ts
In the given link you can observe the described above behavior.

[dimitar-pechev]

Thanks for pointing this out, @destus90, we'll update the type and docs as suggested.

[destus90]

While we are here, I would like to note some oversight in the docs. In your example, the type of anchor argument in the togglePopup method is set to ElementRef which is wrong. It should have been HTMLButtonElement. It would be nice if you updated this typo.

[meriturva]

Actually, if you enable strictTemplates check you are going to have an error based on HtmlElement used as popup anchor.

Property 'nativeElement' is missing in type 'HTMLButtonElement' but required in type 'ElementRef<any>'

The only workaround found is to add $any <kendo-popup [anchor]="$any(anchor)" on template side: https://angular.io/guide/template-typecheck#disabling-type-checking-using-any

[meriturva]

Still present on the latest milestone of kendo components!

[IT-CASADO]

Same problem for me.

Why is this only sev1:low!?

The reason why we want use TypeScript ist safety. It should be possible to enable all strict options that are available. In TypeScript and in Angular too!

[dimitar-pechev]

Turned out this was more than just a docs update task, as changing the type requires more changes in other places of the popup code and possibly in other kendo components using the popup internally as well. The reason it is marked as a low severity issue is that the configuration works as expected when the correct type is provided (ElementRef instaed of HTMLElement) - it is different than #3158, as the summary tag directive is supposed to work without arguments as well.

So, the popup anchor ElementRef can be correctly provided by querying a reference to its ElementRef instance from code and using that value instead of the template variable value. Here's an example.

It does look pretty redundant though and unpleasant to use like so, therefore it is marked as a valid enhancement. As it may take more time to implement and test across other repos where the popup is used, while a viable solution currently exists, it's not yet been planned and I cannot commit to a specific ETA.

[IT-CASADO]

Your solution doesn't work in all of my cases.

E.g it doesn't work in *ngFor or in Kendo controls itself (e.g. kendo-grid):

                <kendo-grid
                    ...
                >               
                    <kendo-grid-column field="name" title="Name" [width]="300">
                        <ng-template kendoGridEditTemplate let-column="column" let-formGroup="formGroup">
                            <input #anchor class="k-textbox" [formControl]="formGroup.get(column.field)" />

                            <kendo-popup [anchor]="anchorElementRef">
                                <span class="k-icon k-i-warning mr-2"></span> Name is required
                            </kendo-popup>

                        </ng-template>
                    </kendo-grid-column>
...

Here 'anchorElementRef' is always undefined!

https://angular.io/guide/template-reference-variables#accessing-in-a-nested-template

[dimitar-pechev]

Good point. Seems we'll have to prioritize this issue after all. In the meantime the [anchor]="$any(anchor)" workaround will have to be used.

Edit:
Duck-typing should also work:

[anchor]="{ nativeElement: anchor }"