app component using portals

app.component.ts

import { DomPortalHost, Portal, ComponentPortal } from '@angular/cdk/portal';

@Component({
  selector: 'my-app',
  template: '',
})
export class AppComponent implements OnInit {
    private portalHost: DomPortalHost;
    private portal: ComponentPortal<HeaderComponent>;

    constructor(
     private componentFactoryResolver: ComponentFactoryResolver,
     private injector: Injector,
     private appRef: ApplicationRef,
    ) { } 

    ngOnInit() {        
        // Create a portalHost from a DOM element
        this.portalHost = new DomPortalHost(
          document.querySelector('#pageHeader'),
          this.componentFactoryResolver,
          this.appRef,
          this.injector
        );

        // Locate the component factory for the HeaderComponent
        this.portal = new ComponentPortal(HeaderComponent);

        // Attach portal to host
        this.portalHost.attach(this.portal);
    }
}