feat(angular): expose getSelected() (#17079)

fixes #17068

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

@@ -1,4 +1,4 @@
-import { Directive, ElementRef, HostListener, Optional } from '@angular/core';
+import { Directive, HostListener, Optional } from '@angular/core';
 
 import { NavController } from '../../providers/nav-controller';
 
@@ -10,19 +10,16 @@ import { IonRouterOutlet } from './ion-router-outlet';
 })
 export class IonBackButtonDelegate {
 
-  set defaultHref(value: string | undefined | null) {
-    this.elementRef.nativeElement.defaultHref = value;
-  }
-  get defaultHref(): string | undefined | null {
-    return this.elementRef.nativeElement.defaultHref;
-  }
+  defaultHref: string | undefined | null;
 
   constructor(
     @Optional() private routerOutlet: IonRouterOutlet,
-    private navCtrl: NavController,
-    private elementRef: ElementRef,
+    private navCtrl: NavController
   ) {}
 
+  /**
+   * @internal
+   */
   @HostListener('click', ['$event'])
   onClick(ev: Event) {
     if (this.routerOutlet && this.routerOutlet.canGoBack()) {

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

@@ -49,6 +49,9 @@ export class IonTabs {
     private navCtrl: NavController,
   ) {}
 
+  /**
+   * @internal
+   */
   @HostListener('ionRouterOutletActivated', ['$event.detail'])
   onPageSelected(detail: {view: RouteView}) {
     if (this.tabBar) {
@@ -69,4 +72,8 @@ export class IonTabs {
       animationDirection: 'back'
     });
   }
+
+  getSelected(): string | undefined {
+    return this.outlet.getActiveStackId();
+  }
 }

angular/src/directives/navigation/router-link-delegate.ts

@@ -45,6 +45,9 @@ export class RouterLinkDelegate {
     }
   }
 
+  /**
+   * @internal
+   */
   @HostListener('click', ['$event'])
   onClick(ev: UIEvent) {
     this.navCtrl.setDirection(this.routerDirection);

core/api.txt

@@ -1063,7 +1063,7 @@ ion-tab,prop,tab,string,undefined,true,false
 ion-tab,method,setActive,setActive() => Promise<void>
 
 ion-tabs,shadow
-ion-tabs,method,getSelected,getSelected() => Promise<HTMLIonTabElement | undefined>
+ion-tabs,method,getSelected,getSelected() => Promise<string | undefined>
 ion-tabs,method,getTab,getTab(tab: string | HTMLIonTabElement) => Promise<HTMLIonTabElement | undefined>
 ion-tabs,method,select,select(tab: string | HTMLIonTabElement) => Promise<boolean>
 ion-tabs,event,ionChange,{tab: HTMLIonTabElement},true

core/src/components.d.ts

@@ -4457,9 +4457,9 @@ export namespace Components {
     /**
     * Get the currently selected tab
     */
-    'getSelected': () => Promise<HTMLIonTabElement | undefined>;
+    'getSelected': () => Promise<string | undefined>;
     /**
-    * Get the tab at the given index
+    * Get the tab element given the tab name
     */
     'getTab': (tab: string | HTMLIonTabElement) => Promise<HTMLIonTabElement | undefined>;
     /**

core/src/components/tab/tab.tsx

@@ -49,12 +49,16 @@ export class Tab implements ComponentInterface {
     this.active = true;
   }
 
-  private prepareLazyLoaded(): Promise<HTMLElement | void> {
+  private async prepareLazyLoaded(): Promise<HTMLElement | undefined> {
     if (!this.loaded && this.component != null) {
       this.loaded = true;
-      return attachComponent(this.delegate, this.el, this.component, ['ion-page']);
+      try {
+        return attachComponent(this.delegate, this.el, this.component, ['ion-page']);
+      } catch (e) {
+        console.error(e);
+      }
     }
-    return Promise.resolve();
+    return undefined;
   }
 
   hostData() {

core/src/components/tabs/readme.md

@@ -176,19 +176,19 @@ Using tabs with Angular's router is fairly straight forward. Here you only need
 
 ## Methods
 
-### `getSelected() => Promise<HTMLIonTabElement | undefined>`
+### `getSelected() => Promise<string | undefined>`
 
 Get the currently selected tab
 
 #### Returns
 
-Type: `Promise<HTMLIonTabElement | undefined>`
+Type: `Promise<string | undefined>`
 
 
 
 ### `getTab(tab: string | HTMLIonTabElement) => Promise<HTMLIonTabElement | undefined>`
 
-Get the tab at the given index
+Get the tab element given the tab name
 
 #### Parameters
 

core/src/components/tabs/tabs.tsx

@@ -99,6 +99,29 @@ export class Tabs implements NavOutlet {
     return true;
   }
 
+  /**
+   * Get the tab element given the tab name
+   */
+  @Method()
+  async getTab(tab: string | HTMLIonTabElement): Promise<HTMLIonTabElement | undefined> {
+    const tabEl = (typeof tab === 'string')
+      ? this.tabs.find(t => t.tab === tab)
+      : tab;
+
+    if (!tabEl) {
+      console.error(`tab with id: "${tabEl}" does not exist`);
+    }
+    return tabEl;
+  }
+
+  /**
+   * Get the currently selected tab
+   */
+  @Method()
+  getSelected(): Promise<string | undefined> {
+    return Promise.resolve(this.selectedTab ? this.selectedTab.tab : undefined);
+  }
+
   /** @internal */
   @Method()
   async setRouteId(id: string): Promise<RouteWrite> {
@@ -122,27 +145,6 @@ export class Tabs implements NavOutlet {
     return tabId !== undefined ? { id: tabId, element: this.selectedTab } : undefined;
   }
 
-  /** Get the tab at the given index */
-  @Method()
-  async getTab(tab: string | HTMLIonTabElement): Promise<HTMLIonTabElement | undefined> {
-    const tabEl = (typeof tab === 'string')
-      ? this.tabs.find(t => t.tab === tab)
-      : tab;
-
-    if (!tabEl) {
-      console.error(`tab with id: "${tabEl}" does not exist`);
-    }
-    return tabEl;
-  }
-
-  /**
-   * Get the currently selected tab
-   */
-  @Method()
-  getSelected(): Promise<HTMLIonTabElement | undefined> {
-    return Promise.resolve(this.selectedTab);
-  }
-
   private async initSelect(): Promise<void> {
     if (this.useRouter) {
       return;