title: Is there a way to display dynamically selected components without use of structural directives
body: <p>I want to allow users to select items/components <strong><em>dynamically</em></strong> from a list. The selected items will be displayed in a gird-like DOM, the catch is that the display elements are different components with their own view.</p>
  
  <p>Rough class structure is below. In theory this should work but I am struggling to figure out how to set up the view? </p>
  
  <p>I was thinking that parent would have <code>*ngFor</code>, of course, but I want to avoid using <code>*ngIf</code> as I am potentially looking of eventually having dozens of different child elements and need to abstract code as much as possible. <em>Ideally</em>, to add a new component all I would have to do is create a child component object and add it to the list in parent component.</p>
  
  <p><strong>I am of course open to other implementations of this as I am fairly new to angular.</strong></p>
  
  <p>I cannot share the actual code, unfortunately, but here is a rough idea of what structure I have.
  <a href="https://stackblitz.com/edit/angular-mx2xli" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-mx2xli</a> <strong>(Draft only - this will not display anything)</strong></p>
  
  <p><a href="https://i.stack.imgur.com/I0Jj8.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/I0Jj8.png" alt="UML DRAFT"></a></p>