summaryrefslogtreecommitdiffstats
path: root/vid-webpack-master/src/app/shared/components/customModal/services/create-dynamic-component.service.ts
diff options
context:
space:
mode:
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.ts107
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;
+ }
+
+}