title: What is the best approach to bind extended interfaces into components based on its type?
body: <p>I'm migrating an old AngularJs app to Angular 12, and am having some problems coming up with a good approach to solve a problem with inheritance.</p>
  <p>It's basically an editor to build a user interface, with custom components such as form, group, row, etc.</p>
  <p>Each component has an @Input of its own type, for example, group takes a &quot;group&quot; type.
  <code> &lt;app-group [elem]=elem&gt; &lt;/app-group&gt;</code>, where elem in this case is of type <em>Group</em>. All of these types extend the type <code>ElemBase</code>.</p>
  <p>All of the elements of various types are stored in a single elements array, of type ElemBase. My goal is to write something like this:</p>
  <pre><code>&lt;div *ngFor=&quot;let elem of elems&quot;&gt;
      &lt;app-group *ngIf=&quot;elem is Group&quot; [elem]=&quot;elem&quot;&gt;&lt;/app-group&gt;
      &lt;app-row *ngIf=&quot;elem is Row&quot; [elem]=&quot;elem&quot;&gt;&lt;/app-row&gt;
      &lt;app-button *ngIf=&quot;elem is Button&quot; [elem]=&quot;elem&quot;&gt;&lt;/app-button&gt;
  &lt;/div&gt;
  </code></pre>
  <p>Do you lovely people of SO have any recommendations on how to achieve this?
  I have tried using a union type such as elements: Array&lt;Group | Row | Button...&gt;, which does not work when binding into each subcomponent.</p>
  <p>Thanks in advance,
  Have a nice day!</p>