How to insert a child angular2 component into a different part of the dom

Can I do something along the lines of: create a dom element, append it to the body, then render an angular component as a child of that dom element?

Yes, you can do that. You need to make popup component dynamic and pass a DOM element when creating it. You also need to attach the resulting view to ApplicationRef.views. This approach is similar to what @angular/material CDK is using.

Here is the stackblitz demo and the code:

import { Component, ComponentFactoryResolver, Injector, Inject, Renderer2, ApplicationRef } from '@angular/core';
import { PopupComponent } from './popup.component';
import { DOCUMENT } from '@angular/platform-browser';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular 4';

  constructor(
    resolver: ComponentFactoryResolver, 
    injector: Injector, 
    @Inject(DOCUMENT) document,
    renderer: Renderer2,
    appRef: ApplicationRef) {
      setTimeout(()=>{
        const element = renderer.createElement('div');
        renderer.appendChild(document.body, element);
        const factory = resolver.resolveComponentFactory(PopupComponent);
        const compRef = factory.create(injector, [], element);
        appRef.attachView(compRef.hostView);
      })
  }
}

To learn more about dynamic components read:

• Here is what you need to know about dynamic components in Angular