From b54ff415017512ae1c494352bc7369b232eb4afd Mon Sep 17 00:00:00 2001 From: Dan Bucholtz Date: Wed, 3 Jan 2018 10:32:24 -0600 Subject: [PATCH] refactor(angular): change how angular mounts a component, use the angular selector if possible --- packages/angular/src/components/ion-nav.ts | 3 +-- packages/angular/src/providers/angular-component-mounter.ts | 3 +++ packages/angular/src/providers/modal-controller.ts | 3 +-- packages/angular/src/providers/popover-controller.ts | 3 +-- 4 files changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/angular/src/components/ion-nav.ts b/packages/angular/src/components/ion-nav.ts index 0a1d86654a..8f3f80e69b 100644 --- a/packages/angular/src/components/ion-nav.ts +++ b/packages/angular/src/components/ion-nav.ts @@ -22,8 +22,7 @@ export class IonNavDelegate implements FrameworkDelegate { attachViewToDom(elementOrContainerToMountTo: HTMLIonNavElement, elementOrComponentToMount: Type, _propsOrDataObj?: any, classesToAdd?: string[]): Promise { - const hostElement = document.createElement('div'); - return this.angularComponentMounter.attachViewToDom(elementOrContainerToMountTo, hostElement, elementOrComponentToMount, this.componentResolveFactory, this.injector, _propsOrDataObj, classesToAdd); + return this.angularComponentMounter.attachViewToDom(elementOrContainerToMountTo, null, elementOrComponentToMount, this.componentResolveFactory, this.injector, _propsOrDataObj, classesToAdd); } removeViewFromDom(_parentElement: HTMLElement, childElement: HTMLElement) { diff --git a/packages/angular/src/providers/angular-component-mounter.ts b/packages/angular/src/providers/angular-component-mounter.ts index 4e1d5e5d7b..4f0faaaff3 100644 --- a/packages/angular/src/providers/angular-component-mounter.ts +++ b/packages/angular/src/providers/angular-component-mounter.ts @@ -54,6 +54,9 @@ export function attachViewToDom(crf: ComponentFactoryResolver, parentElement: HT const componentProviders = ReflectiveInjector.resolve(getProviders(parentElement, data)); const componentFactory = crf.resolveComponentFactory(componentToMount); + if (!hostElement) { + hostElement = document.createElement(componentFactory.selector); + } const childInjector = ReflectiveInjector.fromResolvedProviders(componentProviders, injector); const componentRef = componentFactory.create(childInjector, [], hostElement); for (const clazz of classesToAdd) { diff --git a/packages/angular/src/providers/modal-controller.ts b/packages/angular/src/providers/modal-controller.ts index db9fbfd339..02928e7965 100644 --- a/packages/angular/src/providers/modal-controller.ts +++ b/packages/angular/src/providers/modal-controller.ts @@ -31,8 +31,7 @@ export class ModalController implements FrameworkDelegate { attachViewToDom(elementOrContainerToMountTo: HTMLElement, elementOrComponentToMount: Type, _propsOrDataObj?: any, classesToAdd?: string[]): Promise { - const hostElement = document.createElement('div'); - return this.angularComponentMounter.attachViewToDom(elementOrContainerToMountTo, hostElement, elementOrComponentToMount, this.componentResolveFactory, this.injector, _propsOrDataObj, classesToAdd); + return this.angularComponentMounter.attachViewToDom(elementOrContainerToMountTo, null, elementOrComponentToMount, this.componentResolveFactory, this.injector, _propsOrDataObj, classesToAdd); } removeViewFromDom(_parentElement: HTMLElement, childElement: HTMLElement) { diff --git a/packages/angular/src/providers/popover-controller.ts b/packages/angular/src/providers/popover-controller.ts index 7f38e9a5d3..860aae0b6e 100644 --- a/packages/angular/src/providers/popover-controller.ts +++ b/packages/angular/src/providers/popover-controller.ts @@ -31,8 +31,7 @@ export class PopoverController implements FrameworkDelegate { attachViewToDom(elementOrContainerToMountTo: HTMLElement, elementOrComponentToMount: Type, _propsOrDataObj?: any, classesToAdd?: string[]): Promise { - const hostElement = document.createElement('div'); - return this.angularComponentMounter.attachViewToDom(elementOrContainerToMountTo, hostElement, elementOrComponentToMount, this.componentResolveFactory, this.injector, _propsOrDataObj, classesToAdd); + return this.angularComponentMounter.attachViewToDom(elementOrContainerToMountTo, null, elementOrComponentToMount, this.componentResolveFactory, this.injector, _propsOrDataObj, classesToAdd); } removeViewFromDom(_parentElement: HTMLElement, childElement: HTMLElement) {