AnswerBun.com

TemplateRef type checking/declaring type

Stack Overflow Asked by Petr Averyanov on September 17, 2020

Lets assume I have component with generic type that displays data list:

interface DataProvider<T> {
  getData(): T[];
}

...
template: '<div *vsFor="let item in dataProvider.getData()">
    <ng-container *ngTemplateOutlet="rowTemplate; context:{item: item}">
    </ng-container>
</div>'
...
class AwesomeList<T> {
  @Input dataProvider: DataProvider<T>;
  @Input rowTemplate: TemplateRef<T>;
}

Some problem appears, when I use it:

<awesome-list [dataProvider]="provider" [rowTemplate]="template"></awesome-list>

<ng-template #template let-object="item">
{{object.name}} // Here, type of object is unclear (?)
</ng-template>

So is any way to defined object/item class here?

P.S. All this work ok, but I want to end with strict types, autocomplete in IDE, etc.

One Answer

According to angular doc, you can achieve this by setting the flags "strictTemplates" and "fullTemplateTypeCheck" to true (see more here : https://angular.io/guide/template-typecheck)

I did a repro on stackblitz, sadly I don't think you see such errors with stackblitz, you could just copy/paste this in local and see if it works for you (https://stackblitz.com/edit/angular-strict-template-example?file=src/app/app.component.html)

Please note this is only angular compilation related, I'm not sure VS Code will give you the autocomplete

EDIT : Bad news I tried locally with the flags set to true but it is not working (to me the doc is confusing because it says "Infers the correct type of components/directives, including generics.") @amakhrov referenced the issue explaining this feature is not ready yet https://github.com/angular/angular/issues/28731

Answered by bmtheo on September 17, 2020

Add your own answers!

Related Questions

Red box isn’t placed as expected

1  Asked on November 4, 2021 by liya-thomas

       

String Comparison Javascript

2  Asked on November 4, 2021 by crimsonpython24

       

es5 using promise but returns defered before resolving

2  Asked on November 4, 2021 by rodney-wormsbecher

     

2 arrays with json problem (Node.js, Discord.js)

3  Asked on November 4, 2021 by mr-code

     

Is there a XAML equivalent to nameof?

2  Asked on November 4, 2021 by luxun

       

Multistage builds with yum

3  Asked on November 4, 2021 by vorticity

 

WooCommerce can’t see product variations

1  Asked on November 4, 2021 by tizio-fittizio

       

VScode setup with ROS and auto complete

3  Asked on November 4, 2021 by dixcipuli

         

Pick an account after Connect-MicrosoftTeams

4  Asked on November 4, 2021 by mauek-unak

   

Show local image file:///tmp/someimage.jpg

1  Asked on November 4, 2021 by dani-herrera

   

Ask a Question

Get help from others!

© 2022 AnswerBun.com. All rights reserved. Sites we Love: PCI Database, MenuIva, UKBizDB, Menu Kuliner, Sharing RPP