angular attach component to body
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<any>) .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<any>) .rootNodes[0] as HTMLElement; // Append DOM element to the body document.body.appendChild(domElem); // Add incoming component to modal component domElem.querySelector('#Modal').appendChild(contentElem); } }
