title: Using a component defined inside another component is being loaded to DOM in Angular
body: <p>I have main component that has reusable component and other components that feed reusable component and any event would send back the value to the relative component. All of the above mentioned functionality works but other components are not loaded to the DOM.</p>
  
  <p>maincomponent.html</p>
  
  <pre><code> &lt;app-main&gt;
        &lt;app-pie-chart&gt;&lt;/app-pie-chart&gt;
   &lt;/app-main&gt;
  </code></pre>
  
  <p>I don't see  tag in the DOM after the application is bootstrapped that is causing an issue of not appending the chart to the <code>&lt;app-pie-chart&gt;</code>. Is this the correct way of implementing it? I am planning to reuse app-main component for multiple charts.</p>