-
-
Save ErliSoares/29f95e3988d1a131e047d8153848e527 to your computer and use it in GitHub Desktop.
Service to dynamically append Angular components to the body
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { | |
Injectable, | |
Injector, | |
ComponentFactoryResolver, | |
EmbeddedViewRef, | |
ApplicationRef, | |
ComponentRef | |
} from '@angular/core'; | |
@Injectable() | |
export class DomService { | |
constructor( | |
private componentFactoryResolver: ComponentFactoryResolver, | |
private appRef: ApplicationRef, | |
private injector: Injector | |
) { } | |
createComponent(component: any, componentProps?: object) { | |
// 1. Create a component reference from the component | |
const componentRef = this.componentFactoryResolver | |
.resolveComponentFactory(component) | |
.create(this.injector); | |
if (componentProps && typeof componentRef.instance === 'object') { | |
Object.assign(componentRef.instance as object, componentProps); | |
} | |
return componentRef; | |
} | |
attachComponent(componentRef: ComponentRef<unknown>, appendTo: Element) { | |
// 2. Attach component to the appRef so that it's inside the ng component tree | |
this.appRef.attachView(componentRef.hostView); | |
// 3. Get DOM element from component | |
const domElem = (componentRef.hostView as EmbeddedViewRef<any>) | |
.rootNodes[0] as HTMLElement; | |
// 4. Append DOM element to the body | |
appendTo.appendChild(domElem); | |
return; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment