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<any>, _propsOrDataObj?: any, classesToAdd?: string[]): Promise<AngularMountingData> {
 
-    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<any>, _propsOrDataObj?: any, classesToAdd?: string[]): Promise<AngularMountingData> {
 
-    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<any>, _propsOrDataObj?: any, classesToAdd?: string[]): Promise<AngularMountingData> {
 
-    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) {