title: How to handle iterating over array of child-types in Angular html?
body: <p>I have an array of items that are similar to a FormControl - but each item is a child type of FormControl, each extending different methods for use. When I use *ngFor to iterate over an <code>array: FormControl[]</code> and call the child method inside, like so:</p>
  <pre><code>&lt;ng-container *ngIf=&quot;formControl.type == 1&quot;&gt;
      &lt;button (click)=&quot;formControl.someFunction()&quot;&gt;Type 1 function&lt;/button&gt;
  &lt;/ng-container&gt;
  </code></pre>
  <p>I get a type error saying that <code>someFunction()</code> does not exist on FormControl. This makes sense to me, as it's correct, but how would I properly deal with this situation in Angular?</p>
  <p>I have already tried creating a pipe that takes a <code>FormControl</code> and returns its child type, which works sometimes, but fails in an action expression (error: Cannot have a pipe in an action expression).</p>
  <p>Is there any way to cast inside the Html? Or is there another way I should type my array of formControls?  I tried (<code>ChildType1 | ChildType2 | ChildType3 | FormControl</code>) but that did not work either.</p>
  <p>Thanks!</p>