fix(angular): tune routerLink default behaviour (#16405)

refactor: use ng7 features for direction detection

angular/src/directives/navigation/href-delegate.ts

@@ -1,20 +1,15 @@
 import { Directive, ElementRef, HostListener, Input, Optional } from '@angular/core';
 import { Router } from '@angular/router';
-import { NavController, NavIntent } from '../../providers/nav-controller';
+import { NavController, NavDirection } from '../../providers/nav-controller';
 
-export type RouterDirection =  'forward' | 'back' | 'root' | 'auto';
 
 @Directive({
-  selector: '[routerDirection],ion-anchor,ion-button,ion-item'
+  selector: '[routerLink],[routerDirection],ion-anchor,ion-button,ion-item'
 })
 export class HrefDelegate {
 
-  @Input() routerDirection: RouterDirection = 'forward';
-
-  @Input()
-  set routerLink(_: any) {
-    this.elementRef.nativeElement.button = true;
-  }
+  @Input() routerLink: any;
+  @Input() routerDirection: NavDirection = 'forward';
 
   @Input()
   set href(value: string) {
@@ -33,19 +28,13 @@ export class HrefDelegate {
   @HostListener('click', ['$event'])
   onClick(ev: Event) {
     const url = this.href;
-    if (this.router && url != null && url[0] !== '#' && url.indexOf('://') === -1) {
+    if (this.routerDirection) {
+      this.navCtrl.setDirection(this.routerDirection);
+    }
+
+    if (!this.routerLink && this.router && url != null && url[0] !== '#' && url.indexOf('://') === -1) {
       ev.preventDefault();
-      this.navCtrl.setIntent(textToIntent(this.routerDirection));
       this.router.navigateByUrl(url);
     }
   }
 }
-
-function textToIntent(direction: RouterDirection) {
-  switch (direction) {
-    case 'forward': return NavIntent.Forward;
-    case 'back': return NavIntent.Back;
-    case 'root': return NavIntent.Root;
-    default: return NavIntent.Auto;
-  }
-}

angular/src/directives/navigation/ion-back-button.ts

@@ -1,6 +1,6 @@
 import { Directive, ElementRef, HostListener, Input, Optional } from '@angular/core';
 import { Router } from '@angular/router';
-import { NavController, NavIntent } from '../../providers/nav-controller';
+import { NavController } from '../../providers/nav-controller';
 import { IonRouterOutlet } from './ion-router-outlet';
 
 @Directive({
@@ -29,8 +29,7 @@ export class IonBackButton {
       this.routerOutlet.pop();
       ev.preventDefault();
     } else if (this.router && this.defaultHref != null) {
-      this.navCtrl.setIntent(NavIntent.Back);
-      this.router.navigateByUrl(this.defaultHref);
+      this.navCtrl.navigateBack(this.defaultHref);
       ev.preventDefault();
     }
   }

angular/src/directives/navigation/stack-controller.ts

@@ -1,7 +1,7 @@
 import { ComponentRef, NgZone } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 
-import { NavController } from '../../providers/nav-controller';
+import { NavController, NavDirection } from '../../providers/nav-controller';
 
 
 export class StackController {
@@ -32,7 +32,7 @@ export class StackController {
     return this.views.find(vw => vw.url === activatedUrlKey);
   }
 
-  async setActive(enteringView: RouteView, direction: number, animated: boolean) {
+  async setActive(enteringView: RouteView, direction: NavDirection, animated: boolean) {
     const leavingView = this.getActive();
     this.insertView(enteringView, direction);
     await this.transition(enteringView, leavingView, direction, animated, this.canGoBack(1), false);
@@ -54,7 +54,7 @@ export class StackController {
     this.transition(
       this.views[this.views.length - 2], // entering view
       this.views[this.views.length - 1], // leaving view
-      -1,
+      'back',
       true,
       true,
       true
@@ -69,7 +69,7 @@ export class StackController {
   }
 
 
-  private insertView(enteringView: RouteView, direction: number) {
+  private insertView(enteringView: RouteView, direction: NavDirection) {
     // no stack
     if (!this.stack) {
       this.views = [enteringView];
@@ -77,7 +77,7 @@ export class StackController {
     }
 
     // stack setRoot
-    if (direction === 0) {
+    if (direction === 'root') {
       this.views = [enteringView];
       return;
     }
@@ -87,7 +87,7 @@ export class StackController {
     if (index >= 0) {
       this.views = this.views.slice(0, index + 1);
     } else {
-      if (direction === 1) {
+      if (direction === 'forward') {
         this.views.push(enteringView);
       } else {
         this.views = [enteringView];
@@ -120,7 +120,7 @@ export class StackController {
   private async transition(
     enteringView: RouteView | undefined,
     leavingView: RouteView | undefined,
-    direction: number,
+    direction: NavDirection,
     animated: boolean,
     showGoBack: boolean,
     progressAnimation: boolean
@@ -145,7 +145,7 @@ export class StackController {
       await containerEl.componentOnReady();
       this.runningTransition = containerEl.commit(enteringEl, leavingEl, {
         duration: !animated ? 0 : undefined,
-        direction: direction === 1 ? 'forward' : 'back',
+        direction: direction === 'forward' ? 'forward' : 'back', // TODO: refactor
         deepWait: true,
         showGoBack,
         progressAnimation

angular/src/directives/navigation/tabs-delegate.ts

@@ -8,7 +8,7 @@ import { NavController } from '../../providers';
 })
 export class TabsDelegate {
 
-  @ContentChildren(TabDelegate) tabs: QueryList<TabDelegate>;
+  @ContentChildren(TabDelegate) tabs!: QueryList<TabDelegate>;
 
   constructor(
     @Optional() private navCtrl: NavController,
@@ -23,9 +23,8 @@ export class TabsDelegate {
     return tabDelegate ? tabDelegate.getLastUrl() : undefined;
   }
 
-  @HostListener('ionTabButtonClick', ['$event'])
-  onTabbarClick(ev: any) {
-    const detail = ev.detail as TabButtonClickDetail;
+  @HostListener('ionTabButtonClick', ['$event.detail'])
+  onTabbarClick(detail: TabButtonClickDetail) {
     const { tab, href, selected } = detail;
     if (tab && href) {
       const url = selected

angular/src/directives/virtual-scroll/virtual-scroll.ts

@@ -20,9 +20,9 @@ import { VirtualContext } from './virtual-utils';
 })
 export class VirtualScroll {
 
-  @ContentChild(VirtualItem) itmTmp: VirtualItem;
-  @ContentChild(VirtualHeader) hdrTmp: VirtualHeader;
-  @ContentChild(VirtualFooter) ftrTmp: VirtualFooter;
+  @ContentChild(VirtualItem) itmTmp!: VirtualItem;
+  @ContentChild(VirtualHeader) hdrTmp!: VirtualHeader;
+  @ContentChild(VirtualFooter) ftrTmp!: VirtualFooter;
 
   constructor(
     private el: ElementRef,