title: How can I create multiple dynamic components in multiple sections on a single page? Angular 5
body: <p>I am trying to create 4 separate div inside a page and the content of each div comes from a separate component. So far I had successfully rendered all 4 on a single page using Component Factory however the thing I'm trying to achieve is:
  First component can be static as it's the initial page and there are buttons in the first component, when I click a button in the first component I want the second div to appear next to it (containing a few buttons), and when clicking on a button on the second div the third div should appear next to it. So far what I did is this.</p>
  
  <p>I created 4 separate components named block0, block1, block2 and block3 under a component named dynamic component.
  I then simply kept the block 1 selector inside the HTML of dynamic component(dynamic.component.html)
  here's what I did:</p>
  
  <pre><code>&lt;app-block0 (notify)="onGroupReq($event)"&gt;&lt;/app-block0&gt;
  &lt;ng-container #block1&gt;&lt;/ng-container&gt;
  &lt;ng-container #block2&gt;&lt;/ng-container&gt;
  &lt;ng-container #block3&gt;&lt;/ng-container&gt;
  </code></pre>
  
  <p>I then created an event emitter in block0Component(this is actually my approach but I'm happy to change it if I get any suggestions along the way).
  I was able to render the next block(Block1Component) on click on an element in block0 however since block1's selector is not there in dynamic component's HTML file, I'm stuck.</p>
  
  <p>It it made any sense please suggest me what should I try any better approach.
  Thanks a lot.</p>