title: Add component to body with other container component on Angular 6
body: <p>I have made service which accept component, adding that component to my component and adding them to <code>&lt;body&gt;</code>. Problem is while I have <code>ng-content</code> in my component to place the incoming component, it simply adding it below the <code>ng-content</code> as simply appendChild do.</p>
  
  <p>./service.ts</p>
  
  <pre class="lang-js prettyprint-override"><code>import {
      Injectable,
      Injector,
      ComponentFactoryResolver,
      EmbeddedViewRef,
      ApplicationRef,
      ComponentRef
  } from '@angular/core';
  import { ModalComponent } from './modal.component';
  @Injectable({
    providedIn: 'root'
  })
  export class ModalService {
    constructor(
        private componentFactoryResolver: ComponentFactoryResolver,
        private appRef: ApplicationRef,
        private injector: Injector
    ) { }
    appendComponentToBody(component: any) {
      // Create a component reference from the incoming component 
      let componentRef = this.componentFactoryResolver
        .resolveComponentFactory(component)
        .create(this.injector);
      // Attach incoming component to the appRef so that it's inside the ng component tree
      this.appRef.attachView(componentRef.hostView);
      // Get DOM element from incoming component
      let contentElem = (componentRef.hostView as EmbeddedViewRef&lt;any&gt;)
        .rootNodes[0] as HTMLElement;
      // Create a component reference from the service component 
      let componentRefer = this.componentFactoryResolver
        .resolveComponentFactory(ModalComponent)
        .create(this.injector);
      // Attach component to the appRef so that it's inside the ng component tree
      this.appRef.attachView(componentRefer.hostView);
      // Get DOM element from service component
      let domElem = (componentRefer.hostView as EmbeddedViewRef&lt;any&gt;)
        .rootNodes[0] as HTMLElement;
      domElem.appendChild(contentElem);
      // Append DOM element to the body
      document.body.appendChild(domElem);
    }
  }
  </code></pre>
  
  <p>./modal.component.ts</p>
  
  <pre class="lang-js prettyprint-override"><code>import { Component, OnInit } from '@angular/core';
  @Component({
    selector: 'modal',
    template: `
      &lt;div&gt;
        &lt;ng-content&gt;
        &lt;/ng-content&gt;
      &lt;/div&gt;    
    `,
    styles: []
  })
  export class ModalComponent implements OnInit {
    constructor() { }
    ngOnInit() {
    }
  }
  </code></pre>
  
  <p>result of that service call will be in body if we provide picture component:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;modal&gt;
     &lt;div&gt;&lt;/div&gt;
     &lt;app-picture _nghost-c2=""&gt;
       &lt;p _ngcontent-c2=""&gt; picture works!&lt;/p&gt;
     &lt;/app-picture&gt;
  &lt;/modal&gt;
  </code></pre>
  
  <p>expectation in body:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;modal&gt;
     &lt;div&gt;
       &lt;app-picture _nghost-c2=""&gt;
          &lt;p _ngcontent-c2=""&gt; picture works!&lt;/p&gt;
       &lt;/app-picture&gt;
     &lt;/div&gt;
  &lt;/modal&gt;
  </code></pre>