fix(angular): modal and popover support

angular/src/index.ts

@@ -13,6 +13,7 @@ export { VirtualHeader } from './directives/virtual-header';
 export { VirtualFooter } from './directives/virtual-footer';
 
 /* Providers */
+export { AngularDelegate } from './providers/angular-delegate';
 export { ActionSheetController } from './providers/action-sheet-controller';
 export { AlertController } from './providers/alert-controller';
 export { Events } from './providers/events';

angular/src/module.ts

@@ -25,6 +25,7 @@ import { VirtualHeader } from './directives/virtual-header';
 import { VirtualFooter } from './directives/virtual-footer';
 
 /* Providers */
+import { AngularDelegate } from './providers/angular-delegate';
 import { ActionSheetController } from './providers/action-sheet-controller';
 import { AlertController } from './providers/alert-controller';
 import { Events, setupProvideEvents } from './providers/events';
@@ -71,10 +72,6 @@ import { ToastController } from './providers/toast-controller';
   imports: [
     CommonModule,
   ],
-  providers: [
-    ModalController,
-    PopoverController,
-  ],
   schemas: [
     CUSTOM_ELEMENTS_SCHEMA
   ]
@@ -84,6 +81,9 @@ export class IonicAngularModule {
     return {
       ngModule: IonicAngularModule,
       providers: [
+        ModalController,
+        PopoverController,
+        AngularDelegate,
         AlertController,
         ActionSheetController,
         Events,

angular/src/providers/angular-delegate.ts

@@ -0,0 +1,52 @@
+import {
+  ApplicationRef,
+  ComponentFactoryResolver,
+  Injectable,
+  Injector,
+} from '@angular/core';
+
+import { FrameworkDelegate } from '@ionic/core';
+
+
+@Injectable()
+export class AngularDelegate implements FrameworkDelegate {
+
+  private elRefMap = new WeakMap<HTMLElement, any>();
+
+  constructor(
+    private cfr: ComponentFactoryResolver,
+    private injector: Injector,
+    private appRef: ApplicationRef
+  ) {}
+
+  attachViewToDom(container: any, component: any, data?: any, cssClasses?: string[]): Promise<any> {
+
+    const componentFactory = this.cfr.resolveComponentFactory(component);
+    const hostElement = document.createElement(componentFactory.selector);
+    if (data) {
+      Object.assign(hostElement, data);
+    }
+
+    const childInjector = Injector.create([], this.injector);
+    const componentRef = componentFactory.create(childInjector, [], hostElement);
+    for (const clazz of cssClasses) {
+      hostElement.classList.add(clazz);
+    }
+
+    container.appendChild(hostElement);
+
+    this.appRef.attachView(componentRef.hostView);
+    this.elRefMap.set(hostElement, componentRef);
+    return Promise.resolve(hostElement);
+  }
+
+  removeViewFromDom(_container: any, component: any): Promise<void> {
+    const mountingData = this.elRefMap.get(component);
+    if (mountingData) {
+      mountingData.componentRef.destroy();
+      this.elRefMap.delete(component);
+    }
+    return Promise.resolve();
+  }
+}
+

angular/src/providers/modal-controller.ts

@@ -1,10 +1,20 @@
 import { Injectable } from '@angular/core';
 import { ModalOptions } from '@ionic/core';
 import { OverlayBaseController } from '../util/overlay';
+import { AngularDelegate } from '..';
 
 @Injectable()
 export class ModalController extends OverlayBaseController<ModalOptions, HTMLIonModalElement> {
-  constructor() {
+  constructor(
+    private angularDelegate: AngularDelegate,
+  ) {
     super('ion-modal-controller');
   }
+
+  create(opts?: ModalOptions): Promise<HTMLIonModalElement> {
+    return super.create({
+      ...opts,
+      delegate: this.angularDelegate
+    });
+  }
 }