fix(app-bar): fix appbar to work with new ion-tabs layout

projects/core/src/lib/app-bar-tab-content/app-bar-tab-content.component.ts

@@ -1,6 +1,8 @@
-import { Component, OnInit, Input, HostBinding } from '@angular/core';
+import { AppBarComponent } from './../app-bar/app-bar.component';
+import { Component, OnInit, Input, HostBinding, Output, EventEmitter, Host } from '@angular/core';
 import { NavController } from '@ionic/angular';
 import { AppBarTitleLayout } from '../interfaces';
+import { TabButtonClickDetail } from '@ionic/core';
 
 @Component({
   selector: 'fiv-app-bar-tab-content',
@@ -11,20 +13,31 @@ export class AppBarTabContentComponent implements OnInit {
 
   @Input() name: string;
   @Input() icon: string;
+  @Input() tab: string;
   @Input() href: string;
   @Input() active = false;
   @Input() titleLayout: AppBarTitleLayout = 'hide';
 
+  private selected = false;
+
   @HostBinding('class') get classes(): string {
     return `label-${this.titleLayout}`;
   }
 
-  constructor(private nav: NavController) { }
+  @Output() ionTabButtonClick = new EventEmitter<TabButtonClickDetail>();
+
+  constructor(private nav: NavController, @Host() private appbar: AppBarComponent) { }
 
   ngOnInit() {
+
   }
 
   onClick() {
-    this.nav.navigateRoot(this.href);
+    // this.nav.navigateRoot(this.href);
+    this.ionTabButtonClick.emit({
+      tab: this.tab,
+      href: this.href,
+      selected: true
+    });
   }
 }

projects/core/src/lib/app-bar-tab/app-bar-tab.component.ts

@@ -9,6 +9,7 @@ export class AppBarTabComponent implements OnInit {
 
   @Input() name: string;
   @Input() icon: string;
+  @Input() tab: string;
   @Input() href: string;
 
   constructor() { }

projects/core/src/lib/app-bar/app-bar.component.html

@@ -1,14 +1,16 @@
 <div class="appbar" [ngClass]="{'cutout': cutoutVisible, 'left': left, 'right': right}">
   <div class="appbar-rect left">
     <div class="tabs">
-      <fiv-app-bar-tab-content [active]="tab.href === router.url"  [href]="tab.href" [name]="tab.name" [icon]="tab.icon" [titleLayout]="titleLayout" *ngFor="let tab of tabsLeft"></fiv-app-bar-tab-content>
+      <fiv-app-bar-tab-content (ionTabButtonClick)="ionTabButtonClick($event)"  [active]="router.url.endsWith(tab.href)" [tab]="tab.tab" [href]="tab.href" [name]="tab.name"
+        [icon]="tab.icon" [titleLayout]="titleLayout" *ngFor="let tab of tabsLeft"></fiv-app-bar-tab-content>
     </div>
   </div>
   <fiv-loading-fab (fivHidden)="onFabHidden()" [icon]="icon" [visible]="_fabVisible" #fab (click)="fabClick()"></fiv-loading-fab>
   <div class="rect"></div>
   <div class="appbar-rect right">
     <div class="tabs">
-      <fiv-app-bar-tab-content [active]="tab.href === router.url" [href]="tab.href" [name]="tab.name" [icon]="tab.icon" [titleLayout]="titleLayout" *ngFor="let tab of tabsRight"></fiv-app-bar-tab-content>
+      <fiv-app-bar-tab-content (ionTabButtonClick)="ionTabButtonClick($event)" [active]="router.url.endsWith(tab.href)" [tab]="tab.tab" [href]="tab.href" [name]="tab.name"
+        [icon]="tab.icon" [titleLayout]="titleLayout" *ngFor="let tab of tabsRight"></fiv-app-bar-tab-content>
     </div>
   </div>
 </div>

projects/core/src/lib/app-bar/app-bar.component.ts

@@ -12,6 +12,8 @@ import {
 import { AppBarTabComponent } from '../app-bar-tab/app-bar-tab.component';
 import { Router } from '@angular/router';
 import { AppBarTitleLayout, AppBarFabPosition } from '../interfaces';
+import { IonTabs } from '@ionic/angular';
+import { TabButtonClickDetail } from '@ionic/core';
 
 @Component({
   selector: 'fiv-app-bar',
@@ -31,10 +33,11 @@ export class AppBarComponent implements OnInit, AfterViewInit, AfterContentInit
 
   @ViewChild('fab') fab: LoadingFabComponent;
   @Input() icon = 'md-add';
+  @Input() tabs: IonTabs;
   @Input() titleLayout: AppBarTitleLayout = 'hide';
   @Output() fivFabClick = new EventEmitter<AppBarComponent>();
 
-  @ContentChildren(AppBarTabComponent) tabs: QueryList<AppBarTabComponent>;
+  @ContentChildren(AppBarTabComponent) tabComponents: QueryList<AppBarTabComponent>;
 
   @Input()
   set position(position: AppBarFabPosition) {
@@ -118,14 +121,14 @@ export class AppBarComponent implements OnInit, AfterViewInit, AfterContentInit
 
   private prepareTabs(position: AppBarFabPosition) {
     if (position === 'center') {
-      this.tabsLeft = this.tabs.toArray().slice(0, 2);
-      this.tabsRight = this.tabs.toArray().slice(2, 4);
+      this.tabsLeft = this.tabComponents.toArray().slice(0, 2);
+      this.tabsRight = this.tabComponents.toArray().slice(2, 4);
     } else if (position === 'right') {
-      this.tabsLeft = this.tabs.toArray();
+      this.tabsLeft = this.tabComponents.toArray();
       this.tabsRight = [];
     } else if (position === 'left') {
       this.tabsLeft = [];
-      this.tabsRight = this.tabs.toArray();
+      this.tabsRight = this.tabComponents.toArray();
     }
   }
 
@@ -145,4 +148,8 @@ export class AppBarComponent implements OnInit, AfterViewInit, AfterContentInit
   fabClick() {
     this.fivFabClick.emit(this);
   }
+
+  ionTabButtonClick(event: TabButtonClickDetail) {
+    this.tabs.onTabButtonClick(event);
+  }
 }

src/app/pages/app-bar/app-bar.module.ts

@@ -2,29 +2,22 @@ import { ComponentsModule } from '@components/components.module';
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
-import { Routes, RouterModule } from '@angular/router';
 
 import { IonicModule } from '@ionic/angular';
 
 import { AppBarPage } from './app-bar.page';
 import { FivethreeCoreModule } from 'core';
-
-const routes: Routes = [
-  {
-    path: '',
-    component: AppBarPage
-  }
-];
+import { TabsPageRoutingModule } from './tabs.router.module';
 
 @NgModule({
   imports: [
     CommonModule,
     FormsModule,
     IonicModule,
     FivethreeCoreModule,
-    RouterModule.forChild(routes),
+    TabsPageRoutingModule,
     ComponentsModule
   ],
   declarations: [AppBarPage]
 })
-export class AppBarPageModule {}
+export class AppBarPageModule { }

src/app/pages/app-bar/app-bar.page.html

@@ -32,23 +32,25 @@
 
           </div>
 
-          <ion-tabs>
-            <fiv-app-bar (fivFabClick)="presentToast('Floating action button clicked')" slot="bottom" [titleLayout]="titleLayout"
+          <ion-tabs #tabs>
+            <fiv-app-bar [tabs]="tabs" (fivFabClick)="presentToast('Floating action button clicked')" slot="bottom" [titleLayout]="titleLayout"
               #bar [position]="position" [fabVisible]="fabVisible" [icon]="icon">
-              <fiv-app-bar-tab left href="/app-bar" icon="md-home" name="App Bar">
+              <fiv-app-bar-tab left tab="tab1" href="/tab1" icon="md-home" name="App Bar">
               </fiv-app-bar-tab>
-              <fiv-app-bar-tab left href="/expandable" icon="md-resize" name="Expandable">
+              <fiv-app-bar-tab left tab="tab2" href="/tab2" icon="md-resize" name="Expandable">
               </fiv-app-bar-tab>
-              <fiv-app-bar-tab right href="/password" icon="md-eye" name="Password">
+              <fiv-app-bar-tab right tab="tab3" href="/tab3" icon="md-eye" name="Password">
               </fiv-app-bar-tab>
-              <fiv-app-bar-tab right href="/buttons" icon="md-more" name="Buttons">
+              <fiv-app-bar-tab right tab="tab4" href="/tab4" icon="md-more" name="Buttons">
               </fiv-app-bar-tab>
             </fiv-app-bar>
           </ion-tabs>
+
+
         </app-example>
       </ion-col>
     </ion-row>
   </ion-grid>
 
   <app-footer></app-footer>
-</ion-content>
+</ion-content>  

src/app/pages/app-bar/tabs.router.module.ts

@@ -0,0 +1,65 @@
+import { AppBarPage } from './app-bar.page';
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+
+
+const routes: Routes = [
+  {
+    path: 'tabs',
+    component: AppBarPage,
+    children: [
+      {
+        path: 'tab1',
+        children: [
+          {
+            path: '',
+            loadChildren: '../bottom-sheet/bottom-sheet.module#BottomSheetPageModule'
+          }
+        ]
+      },
+      {
+        path: 'tab2',
+        children: [
+          {
+            path: '',
+            loadChildren: '../buttons/buttons.module#ButtonsPageModule'
+          }
+        ]
+      },
+      {
+        path: 'tab3',
+        children: [
+          {
+            path: '',
+            loadChildren: '../bottom-sheet/bottom-sheet.module#BottomSheetPageModule'
+          }
+        ]
+      },
+      {
+        path: 'tab4',
+        children: [
+          {
+            path: '',
+            loadChildren: '../bottom-sheet/bottom-sheet.module#BottomSheetPageModule'
+          }
+        ]
+      },
+      {
+        path: '',
+        redirectTo: '/app-bar/tabs/tab1',
+        pathMatch: 'full',
+      },
+    ]
+  },
+  {
+    path: '',
+    redirectTo: '/app-bar/tabs/tab1',
+    pathMatch: 'full'
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class TabsPageRoutingModule { }