fix(angular): lifecycles

angular/src/navigation/ion-router-outlet.ts

@@ -2,6 +2,7 @@ import { Attribute, ChangeDetectorRef, ComponentFactoryResolver, ComponentRef, D
 import { ActivatedRoute, ChildrenOutletContexts, PRIMARY_OUTLET, Router } from '@angular/router';
 import { StackController } from './router-controller';
 import { NavController } from './ion-nav-controller';
+import { bindLifecycleEvents } from '../providers/angular-delegate';
 
 @Directive({
   selector: 'ion-router-outlet',
@@ -129,7 +130,9 @@ export class IonRouterOutlet implements OnDestroy, OnInit {
       const childContexts = this.parentContexts.getOrCreateContext(this.name).children;
 
       const injector = new OutletInjector(activatedRoute, childContexts, this.location.injector);
-      this.activated = this.location.createComponent(factory, this.location.length, injector);
+      const cmp = this.activated = this.location.createComponent(factory, this.location.length, injector);
+
+      bindLifecycleEvents(cmp.instance, cmp.location.nativeElement);
 
       // Calling `markForCheck` to make sure we will run the change detection when the
       // `RouterOutlet` is inside a `ChangeDetectionStrategy.OnPush` component.

angular/src/providers/angular-delegate.ts

@@ -5,7 +5,7 @@ import {
   Injector,
 } from '@angular/core';
 
-import { FrameworkDelegate } from '@ionic/core';
+import { FrameworkDelegate, ViewLifecycle } from '@ionic/core';
 
 
 @Injectable()
@@ -44,7 +44,7 @@ export class AngularFrameworkDelegate implements FrameworkDelegate {
     for (const clazz of cssClasses) {
       hostElement.classList.add(clazz);
     }
-
+    bindLifecycleEvents(componentRef.instance, hostElement);
     container.appendChild(hostElement);
 
     this.appRef.attachView(componentRef.hostView);
@@ -62,3 +62,20 @@ export class AngularFrameworkDelegate implements FrameworkDelegate {
   }
 }
 
+const LIFECYCLES = [
+  ViewLifecycle.WillEnter,
+  ViewLifecycle.DidEnter,
+  ViewLifecycle.WillLeave,
+  ViewLifecycle.DidLeave,
+  ViewLifecycle.WillUnload
+];
+
+export function bindLifecycleEvents(instance: any, element: HTMLElement) {
+  LIFECYCLES.forEach(eventName => {
+    element.addEventListener(eventName, (ev: CustomEvent) => {
+      if (typeof instance[eventName] === 'function') {
+        instance[eventName](ev.detail);
+      }
+    });
+  });
+}

core/src/index.d.ts

@@ -109,6 +109,7 @@ export * from './components';
 export { DomController, RafCallback } from './global/dom-controller';
 export { FrameworkDelegate } from './utils/framework-delegate';
 export { OverlayEventDetail } from './utils/overlays';
+export * from './utils/transition';
 
 export type ComponentRef = Function | HTMLElement | string;
 export type ComponentProps = {[key: string]: any};