Type checking Angular template

Question

I would like to use type checking on angular templates.

When a property has 2 or more possible types, the template is not able to determine which is the current type in its context. Even using an "if" to check for the presence of the property, my IDE (VSCODE) isn't happy. With typescript side I could just use if ('property' in myObj) but I can't reproduce this on the template side.

Example: https://stackblitz.com/edit/angular-ivy-bjfyu9?file=src/app/app.component.html

Just remove the FOO interface on the property, then it work...

How can I check the type of a property in an angular template?

I read https://angular.io/guide/template-typecheck but nothing about a case when a property has 2 or more types possibles (except null).

I know it could work if I add a property like "kind" for union in each object. But I can't change the data schema.

Using angular 14

  "angularCompilerOptions": {
    "strictTemplates": true,
    "strictInjectionParameters": true,
    "strictInputAccessModifiers": true
  }

AVJT82 · Accepted Answer · 2022-09-04 17:21:37Z

0

If you cannot do anything to the data schema, the last resort would be to use any in the template. Not anything I would ever recommend in any other situation, unless really neccessary, but if there is no other way, then do that:

<div *ngIf="$any(property).date">{{ $any(property).date }}</div>

Your forked STACKBLITZ

answered Sep 4, 2022 at 17:21

AVJT82

73.6k25 gold badges146 silver badges170 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Type checking Angular template

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related