title: Angular display a component elsewhere
body: <p>I need to display the full generated content of a component some where else in the html dom (although within the <code>app-root</code>).</p>
  
  <p>Let me explain.</p>
  
  <p>I have this code in <code>app.component.html</code></p>
  
  <pre><code>&lt;app-component-one&gt;&lt;/app-component-one&gt;
  &lt;app-component-two&gt;&lt;/app-component-two&gt;
  </code></pre>
  
  <p>Now <code>app-component-two</code> calls another component in it conditionally, like this:</p>
  
  <pre><code>&lt;app-component-three *ngIf="show3"&gt;&lt;/app-component-three&gt;
  </code></pre>
  
  <p>Now what it will do is that it will show the <code>app-component-three</code> data/html inside <code>app-component-two</code>. But for some reason I want that data/html to be placed/shown inside the <code>app-component-one</code>.</p>
  
  <p>Is that possible?</p>
  
  <p><strong><em>EDITS</em></strong></p>
  
  <p><strong>Use Case 1:</strong> <code>app-component-one</code> is on the left half of screen, <code>app-component-two</code> is on the right half. Some formatted and bound data is generated in <code>app-component-two</code> but I want to show it on the left side of the screen, not on right side where it was actually generated.</p>
  
  <p><strong>Use Case 2:</strong> <code>app-component-one</code> is outside all bounds and <code>router-outlet</code>, while <code>app-component-two</code> is actual app which generates reports. If the report is kept in there, it is not rendered properly. So I need to pull it out of the <code>app-component-two</code> component and its <code>position: fixed</code> css bounds.</p>