[Fixed] Can I do type-narrowing in an Angular template?

Issue

I have a component that takes a business object as an Input. In the template for this component, I want to conditionally render some content by checking the value of a property that only exists on some subclasses of the business object.

export class Thing { public foo: string; }
export class SubThing extends Thing { public bar: number; }

// ...
export class MyComponent {
  @Input() thing: Thing;
}

---

<!-- template file -->
{{ thing.foo }}
<div *ngIf="thing?.bar > 10">Conditional content...</div>

This used to work as written because the compiler wasn’t very strict about type checking in the templates. Recently this started breaking with the AOT compiler (not sure exactly when) because, strictly speaking, thing?.bar is not valid when the compiler thinks thing is just a Thing, and can’t say for certain that it’s a SubThing.

I would like to say something like *ngIf="thing instanceof SubThing && thing?.bar > 10" but I can’t use instanceof in the template itself. Is there some other way I can check the type of thing from the template, such that the compiler stops complaining? (I got the build working again by specifying my Input as any but of course I’d like to get my type checking back if possible.)

Solution

Apparently the compiler respects User Defined Type Guards. I just have to define a method in my component:

export class MyComponent {
  // ...
  /** @internal */ isSubThing(t: Thing): t is SubThing {
    return t instanceof SubThing;
  }
}

---

<!-- template file -->
{{ thing.foo }}
<div *ngIf="isSubThing(thing) && thing?.bar > 10">
  Conditional content...
</div>