feat(angular): strongly type Ionic lifecycle hooks (#18044)

closes #18043

angular/src/index.ts

@@ -36,6 +36,9 @@ export { GestureController } from './providers/gesture-controller';
 // ROUTER STRATEGY
 export { IonicRouteStrategy } from './util/ionic-router-reuse-strategy';
 
+// TYPES
+export * from './types/ionic-lifecycle-hooks';
+
 // PACKAGE MODULE
 export { IonicModule } from './ionic-module';
 

angular/src/types/ionic-lifecycle-hooks.ts

@@ -0,0 +1,31 @@
+/**
+ *  https://ionicframework.com/docs/api/router-outlet#life-cycle-hooks
+ */
+
+export interface ViewWillEnter {
+  /**
+   * Fired when the component routing to is about to animate into view.
+   */
+  ionViewWillEnter(): void;
+}
+
+export interface ViewDidEnter {
+  /**
+   * Fired when the component routing to has finished animating.
+   */
+  ionViewDidEnter(): void;
+}
+
+export interface ViewWillLeave {
+  /**
+   * Fired when the component routing from is about to animate.
+   */
+  ionViewWillLeave(): void;
+}
+
+export interface ViewDidLeave {
+  /**
+   * Fired when the component routing to has finished animating.
+   */
+  ionViewDidLeave(): void;
+}

angular/test/test-app/src/app/modal-example/modal-example.component.ts

@@ -1,11 +1,11 @@
 import { Component, Input, NgZone, OnInit, Optional } from '@angular/core';
-import { ModalController, NavParams, IonNav } from '@ionic/angular';
+import { ModalController, NavParams, IonNav, ViewWillLeave, ViewDidEnter, ViewDidLeave } from '@ionic/angular';
 
 @Component({
   selector: 'app-modal-example',
   templateUrl: './modal-example.component.html',
 })
-export class ModalExampleComponent implements OnInit {
+export class ModalExampleComponent implements OnInit, ViewWillLeave, ViewDidEnter, ViewWillLeave, ViewDidLeave {
 
   @Input() value: string;
 

angular/test/test-app/src/app/router-link-page/router-link-page.component.ts

@@ -1,11 +1,11 @@
 import { Component, OnInit, NgZone } from '@angular/core';
-import { IonRouterOutlet } from '@ionic/angular';
+import { IonRouterOutlet, ViewDidEnter, ViewDidLeave, ViewWillLeave } from '@ionic/angular';
 
 @Component({
   selector: 'app-router-link-page',
   templateUrl: './router-link-page.component.html',
 })
-export class RouterLinkPageComponent implements OnInit {
+export class RouterLinkPageComponent implements OnInit, ViewWillLeave, ViewDidEnter, ViewWillLeave, ViewDidLeave {
 
   onInit = 0;
   willEnter = 0;

angular/test/test-app/src/app/router-link/router-link.component.ts

@@ -1,12 +1,12 @@
 import { Component, NgZone, OnInit } from '@angular/core';
-import { NavController } from '@ionic/angular';
+import { NavController, ViewDidEnter, ViewDidLeave, ViewWillEnter, ViewWillLeave } from '@ionic/angular';
 import { Router } from '@angular/router';
 
 @Component({
   selector: 'app-router-link',
   templateUrl: './router-link.component.html',
 })
-export class RouterLinkComponent implements OnInit {
+export class RouterLinkComponent implements OnInit, ViewWillEnter, ViewDidEnter, ViewWillLeave, ViewDidLeave {
 
   onInit = 0;
   willEnter = 0;

angular/test/test-app/src/app/virtual-scroll-detail/virtual-scroll-detail.component.ts

@@ -1,11 +1,12 @@
 import { Component, NgZone, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
+import { ViewDidEnter, ViewDidLeave, ViewWillEnter, ViewWillLeave } from '@ionic/angular';
 
 @Component({
   selector: 'app-virtual-scroll-detail',
   templateUrl: './virtual-scroll-detail.component.html',
 })
-export class VirtualScrollDetailComponent implements OnInit {
+export class VirtualScrollDetailComponent implements OnInit, ViewWillEnter, ViewDidEnter, ViewWillLeave, ViewDidLeave {
 
   onInit = 0;
   willEnter = 0;

core/src/components/router-outlet/readme.md

@@ -12,12 +12,12 @@ Although router outlet has methods for navigating around, it's recommended to us
 Routes rendered in a Router Outlet have access to specific Ionic events that are wired up to animations
 
 
-| Event Name         | Trigger                                                          |
+| Event Name         | Trigger                                                            |
-|--------------------|------------------------------------------------------------------|
+|--------------------|--------------------------------------------------------------------|
-| `ionViewWillEnter` | Fired when the component being routed to is about to animate in. |
+| `ionViewWillEnter` | Fired when the component routing to is about to animate into view. |
-| `ionViewDidEnter`  | Fired when the component being routed to has animated in.        |
+| `ionViewDidEnter`  | Fired when the component routing to has finished animating.        |
-| `ionViewWillLeave` | Fired when the component being routed from is about to animate.  |
+| `ionViewWillLeave` | Fired when the component routing from is about to animate.         |
-| `ionViewDidLeave`  | Fired when the component being routed from has animated.         |
+| `ionViewDidLeave`  | Fired when the component routing to has finished animating.        |
 
 
 These event tie into Ionic's animation system and can be used to coordinate parts of your app when a Components is done with it's animation. These events are not a replacement for Angular's own event system, but an addition.