title: Can I do type-narrowing in an Angular template?
body: <p>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.</p>
  
  <pre><code>export class Thing { public foo: string; }
  export class SubThing extends Thing { public bar: number; }
  
  // ...
  export class MyComponent {
    @Input() thing: Thing;
  }
  </code></pre>
  
  <hr>
  
  <pre><code>&lt;!-- template file --&gt;
  {{ thing.foo }}
  &lt;div *ngIf="thing?.bar &gt; 10"&gt;Conditional content...&lt;/div&gt;
  </code></pre>
  
  <p>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, <code>thing?.bar</code> is not valid when the compiler thinks <code>thing</code> is just a <code>Thing</code>, and can't say for certain that it's a <code>SubThing</code>.</p>
  
  <p>I would like to say something like <code>*ngIf="thing instanceof SubThing &amp;&amp; thing?.bar &gt; 10"</code> but I can't use <code>instanceof</code> in the template itself.  Is there some other way I can check the type of <code>thing</code> from the template, such that the compiler stops complaining?  (I got the build working again by specifying my Input as <code>any</code> but of course I'd like to get my type checking back if possible.)</p>