diff options
author | Yoav Schneiderman <yoav.schneiderman@intl.att.com> | 2020-01-08 14:46:14 +0200 |
---|---|---|
committer | Ittay Stern <ittay.stern@att.com> | 2020-01-09 13:29:49 +0000 |
commit | 4ef3ee778fc944cdfe28146d4eed360ce096e5ee (patch) | |
tree | c641429928518b64f7a39acd1d241043a28978cd /vid-webpack-master/src/app/shared/components/customModal/services/create-dynamic-component.service.ts | |
parent | e8414b1fe839291418ead3a7e5a64bf382dc1121 (diff) |
Upgrade to Angular 8
Issue-ID: VID-742
Change-Id: Ic4b3aae71d4c946e23d854847a49aa7e020c465d
Signed-off-by: Yoav Schneiderman <yoav.schneiderman@intl.att.com>
Diffstat (limited to 'vid-webpack-master/src/app/shared/components/customModal/services/create-dynamic-component.service.ts')
-rw-r--r-- | vid-webpack-master/src/app/shared/components/customModal/services/create-dynamic-component.service.ts | 107 |
1 files changed, 107 insertions, 0 deletions
diff --git a/vid-webpack-master/src/app/shared/components/customModal/services/create-dynamic-component.service.ts b/vid-webpack-master/src/app/shared/components/customModal/services/create-dynamic-component.service.ts new file mode 100644 index 000000000..64fe66ce6 --- /dev/null +++ b/vid-webpack-master/src/app/shared/components/customModal/services/create-dynamic-component.service.ts @@ -0,0 +1,107 @@ +import { + ApplicationRef, + ComponentFactoryResolver, + ComponentRef, + EmbeddedViewRef, + Injectable, + Injector, Type, ViewContainerRef +} from "@angular/core"; + +@Injectable() +export class CreateDynamicComponentService { + + constructor(private componentFactoryResolver: ComponentFactoryResolver, + private applicationRef: ApplicationRef, + private injector: Injector) { + } + + /** + * Gets the root view container to inject the component to. + * + * @returns {ComponentRef<any>} + * + * @memberOf InjectionService + */ + private getRootViewContainer(): ComponentRef<any> { + const rootComponents = this.applicationRef['components']; + if (rootComponents.length) { + return rootComponents[0]; + } + throw new Error('View Container not found! ngUpgrade needs to manually set this via setRootViewContainer.'); + } + + /** + * Gets the html element for a component ref. + * + * @param {ComponentRef<any>} componentRef + * @returns {HTMLElement} + * + * @memberOf InjectionService + */ + private getComponentRootNode(componentRef: ComponentRef<any>): HTMLElement { + return (componentRef.hostView as EmbeddedViewRef<any>).rootNodes[0] as HTMLElement; + } + + /** + * Gets the root component container html element. + * + * @returns {HTMLElement} + * + * @memberOf InjectionService + */ + private getRootViewContainerNode(): HTMLElement { + return this.getComponentRootNode(this.getRootViewContainer()); + } + + /** + * Projects the inputs onto the component + * + * @param {ComponentRef<any>} component + * @param {*} options + * @returns {ComponentRef<any>} + * + * @memberOf InjectionService + */ + private projectComponentInputs(component: ComponentRef<any>, options: any): ComponentRef<any> { + if (options) { + const props = Object.getOwnPropertyNames(options); + for (const prop of props) { + component.instance[prop] = options[prop]; + } + } + + return component; + } + + public createComponentDynamically<T>(componentClass: Type<T>, options: any = {}, location: Element = this.getRootViewContainerNode()): ComponentRef<any> { + const componentFactory = this.componentFactoryResolver.resolveComponentFactory(componentClass); + const componentRef = componentFactory.create(this.injector); + const componentRootNode = this.getComponentRootNode(componentRef); + + // project the options passed to the component instance + this.projectComponentInputs(componentRef, options); + this.applicationRef.attachView(componentRef.hostView); + + componentRef.onDestroy(() => { + this.applicationRef.detachView(componentRef.hostView); + }); + + location.appendChild(componentRootNode); + return componentRef; + } + + /** + * Inserts a component into an existing viewContainer + * @param componentType - type of component to create + * @param options - Inputs to project on new component + * @param vcRef - viewContainerRef in which to insert the newly created component + */ + public insertComponentDynamically<T>(componentType: Type<T>, options: any = {}, vcRef: ViewContainerRef): ComponentRef<any> { + const factory = this.componentFactoryResolver.resolveComponentFactory(componentType); + const dynamicComponent = factory.create(vcRef.parentInjector); + this.projectComponentInputs(dynamicComponent, options); + vcRef.insert(dynamicComponent.hostView); + return dynamicComponent; + } + +} |