TemplateRef for `ng-template`

[supple fossil]

Hey guys. Usually when I'm using TemplateRef hooked up to some html element, I'm using some specific type for TemplateRef, for example TemplateRef<HTMLSpanElement>. However, when it comes to using it with ng-template I could not find any corresponding TS type that I would use with TemplateRef, leaving me with TemplateRef<any>. And since I'm trying to write my application as strongly typed as possible, using any kind of hurts my brain. Could you guys tell me if there is any specific type I could use in such case?

[supple falcon]

The generic type of a TemplateRef is not an element type. It's the type of the context that is being exposed to the template (and that you can access with ng-template let-foo="bar">). So, every time you're using TemplateRef<HTMLSpanElement>, you're doing it wrong.

[cobalt iris]

just use TemplateRef<unknown> if you don't know the type.

[supple fossil]

Please read my question again. Your answer does not answer the question I have asked.

And regarding what you have written - I did not write anywhere that I'm using TemplateRef<HTMLSpanElement> in every single case - quite the opposite, I'm using it when I'm refering to <span>

[supple fossil]

Using TemplateRef<unknown> when referencing <ng-template> feels kind of unsatisfactory :/

[supple falcon]

Please read my answer again. It very much answers the question you're asking. And I never claimed that you always used TemplateRef<HTMLSpanElement>. What I claimed is that if you use TemplateRef<HTMLSpanElement>, or TemplateRef<HTMLDivElement>, or TemplateRef<AnyElement>, you're doing something wrong, because the generic type of TemplateRef is not supposed to be an element. It's supposed to be the type of the context object that the template can use to get variables out of it. See https://angular.io/api/core/TemplateRef

[hybrid geyser]

How are you getting the TemplateRef?

Only an <ng-template> with a directive on it can have any kind of type safety guarantees. Otherwise, the generic type of TemplateRef is just a hint/helper as to what kind of data will be used to create the template.

[supple fossil]

In x.component.html I have this kind of code

<ng-template #template>
  <ng-container [ngSwitch]="someValueISwitchOver">
    <some divs/>...
  </ng-container>
  <ng-container *ngIf="someCondition">
    <div/>
  </ng-container>
</ng-template>

and then in x.component.ts as my component class property

@ViewChild('template', { read: TemplateRef, static: true }) template: TemplateRef<any>;

Since I want to have strong typing, I would like to get rid of any type, or maybe change the type of the template. I have no idea where to find a proper way to do it tho.

[supple falcon]

Your ng-template doesn't have any context. I would just use unknown instead of any. But you're not going to use the context of the template anyway, so its type doesn't matter much.

[hybrid geyser]

Or {} - an object with no properties.

[supple fossil]

Okay, I see. Thank you for help.

Just out of curiosity. Could you please give me an example of an ng-template with a context?

[supple falcon]

See https://ng-bootstrap.github.io/#/components/modal/examples#basic for example, where the template passed as argument to a modal service has a context allowing to access the current modal, in order to close it.
Or https://ng-bootstrap.github.io/#/components/accordion/examples#header, where the ngbPanelHeader template uses a context allowing to know whether or not the accordion panel is opened.

[hybrid geyser]

@supple fossil your <ng-template> doesn't have any let variables - no data is passed into the template when rendering it.