title: Angular 4 - How to display the template of the inheriting class component
body: <p>I'm trying to display a list of items (components) according to their types:</p>
  
  <p>I have an array of components. 
  All inherits from a base class.
  The array type is defined as that of the base class.
  I want to display the array (let say as a list of items) each with its own template, rather than the base template.</p>
  
  <p>I have tried that:</p>
  
  <p>In the app.component.html:</p>
  
  <pre><code>&lt;app-shape *ngFor="let shape of shapes"&gt;&lt;/app-shape&gt;
  </code></pre>
  
  <p>In the app.component.ts:</p>
  
  <pre><code>shapes: ShapeComponent[] = [new CircleComponent(), new SquareComponent()];
  </code></pre>
  
  <p>I have defined 3 Components:</p>
  
  <pre><code>export class ShapeComponent {
  }
  
  export class CircleComponent extends ShapeComponent{
  }
  
  export class SquareComponent extends ShapeComponent{
  }
  </code></pre>
  
  <p>And the result is that I get a list of shapes.</p>
  
  <p>Does Angular support such a thing?</p>
  
  <p>Thanks!</p>