angular attach component to body code example
Example: 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) {
let componentRef = this.componentFactoryResolver
.resolveComponentFactory(component)
.create(this.injector);
this.appRef.attachView(componentRef.hostView);
let contentElem = (componentRef.hostView as EmbeddedViewRef<any>)
.rootNodes[0] as HTMLElement;
let componentRefer = this.componentFactoryResolver
.resolveComponentFactory(ModalComponent)
.create(this.injector);
this.appRef.attachView(componentRefer.hostView);
let domElem = (componentRefer.hostView as EmbeddedViewRef<any>)
.rootNodes[0] as HTMLElement;
document.body.appendChild(domElem);
domElem.querySelector('#Modal').appendChild(contentElem);
}
}