/Javascript/AngularJS/Angular attach component to body

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);
  }
}

Source: stackoverflow.com

Similar codes

0 vote237 views1 answer
How to trim the file name when length more than 10 in angular
Javascript AngularJS
0 vote244 views1 answer
Mouse wheel event angular for table
Javascript AngularJS
1 vote233 views1 answer
Angular remove item from localstorage
Javascript AngularJS
0 vote220 views1 answer
Ontouch validate angular
Javascript AngularJS
0 vote252 views1 answer
Angular 11 export excel with customize header
Javascript AngularJS
0 vote243 views1 answer
How to use edit and delete button in angular table in each row
Javascript AngularJS
0 vote245 views1 answer
Is it possible to filter with multiple condition in angularjs?
Javascript AngularJS
0 vote247 views1 answer
Angular erro ao adicionar um projeto no firebase Failed to make request to https://www.gstatic.com/firebasejs/releases.json
Javascript AngularJS
0 vote250 views1 answer
Get image from s3 bucket angular
Javascript AngularJS
0 vote241 views1 answer
VideoTitle$ Angular 2 - communication between two sibling components
Javascript AngularJS