Adding Tabs/BottomNav Routing Samples

live-editing/configs/TabBarConfigGenerator.ts

@@ -1,9 +1,14 @@
 /* tslint:disable:object-literal-sort-keys */
 import { Router, RouterModule, Routes } from "@angular/router";
-import { IgxAvatarModule, IgxBottomNavModule, IgxButtonModule,
-    IgxIconModule, IgxListModule, IgxRippleModule } from "igniteui-angular";
+import { IgxAvatarModule, IgxBottomNavModule, IgxButtonModule, IgxGridModule,
+    IgxIconModule, IgxListModule, IgxRippleModule, IgxSelectModule } from "igniteui-angular";
 import { TabbarSample1Component } from "../../src/app/layouts/tabbar/tabbar-sample-1/tabbar-sample-1.component";
 import { TabbarSample2Component } from "../../src/app/layouts/tabbar/tabbar-sample-2/tabbar-sample-2.component";
+import {
+    BottomNavRoutingView1Component,
+    BottomNavRoutingView2Component,
+    BottomNavRoutingView3Component,
+    TabbarSample3Component } from "../../src/app/layouts/tabbar/tabbar-sample-3/tabbar-sample-3.component";
 import { TabbarComponent } from "../../src/app/layouts/tabbar/tabbar.component";
 import { AppModuleConfig } from "./core/AppModuleConfig";
 import { Config } from "./core/Config";
@@ -54,6 +59,33 @@ export class TabBarConfigGenerator implements IConfigGenerator {
             shortenComponentPathBy: "/layouts/tabbar/"
         }));
 
+        // tabbar sample 3
+        configs.push(new Config({
+            component: TabbarSample3Component,
+            appModuleConfig: new AppModuleConfig({
+                imports: [
+                    Router, RouterModule, TabbarSample3Component, IgxBottomNavModule, IgxGridModule,
+                    IgxSelectModule, BottomNavRoutingView1Component, BottomNavRoutingView2Component,
+                    BottomNavRoutingView3Component
+                ],
+                ngDeclarations: [
+                    TabbarSample3Component, BottomNavRoutingView1Component, BottomNavRoutingView2Component,
+                    BottomNavRoutingView3Component
+                ],
+                ngImports: [
+                    IgxBottomNavModule, IgxGridModule, IgxSelectModule,
+                    `
+                    RouterModule.forRoot([
+                        { path: 'arrivals', component: BottomNavRoutingView1Component },
+                        { path: 'departures', component: BottomNavRoutingView2Component },
+                        { path: 'canceled', component: BottomNavRoutingView3Component }
+                    ])
+                    `
+                ]
+            }),
+            shortenComponentPathBy: "/layouts/tabbar/"
+        }));
+
         return configs;
     }
 }

live-editing/configs/TabsConfigGenerator.ts

@@ -1,7 +1,10 @@
 /* tslint:disable:object-literal-sort-keys */
+
+import { Router, RouterModule } from "@angular/router";
+
 import {
-    IgxAvatarModule, IgxButtonModule, IgxCardModule, IgxIconModule,
-    IgxNavbarModule, IgxRippleModule, IgxTabsModule
+    IgxAvatarModule, IgxButtonModule, IgxCardModule, IgxGridModule, IgxIconModule, IgxNavbarModule, IgxRippleModule,
+    IgxSelectModule, IgxTabsModule, IgxToggleModule
 } from "igniteui-angular";
 
 import { TabsSample1Component } from "../../src/app/layouts/tabs/tabs-sample-1/tabs-sample-1.component";
@@ -15,6 +18,11 @@ import { AppRouting2Module } from "../../src/app/layouts/tabs/tabs-sample-5/app.
 import { TabsSample5Component } from "../../src/app/layouts/tabs/tabs-sample-5/components/tabs-sample-5.component";
 import { TabsSample5Module } from "../../src/app/layouts/tabs/tabs-sample-5/tabs-sample-5.module";
 import { TabsRouting2Module } from "../../src/app/layouts/tabs/tabs-sample-5/tabs.routing2.module";
+import {
+    TabsRoutingView1Component,
+    TabsRoutingView2Component,
+    TabsRoutingView3Component,
+    TabsSample6Component } from "../../src/app/layouts/tabs/tabs-sample-6/tabs-sample-6.component";
 import { AppModuleConfig } from "./core/AppModuleConfig";
 import { Config } from "./core/Config";
 import { IConfigGenerator } from "./core/IConfigGenerator";
@@ -102,6 +110,31 @@ export class TabsConfigGenerator implements IConfigGenerator {
             shortenComponentPathBy: "/layouts/tabs/"
         }));
 
+        configs.push(new Config({
+            component: TabsSample6Component,
+            appModuleConfig: new AppModuleConfig({
+                imports: [
+                    Router, RouterModule, TabsSample6Component, IgxGridModule, IgxSelectModule, IgxTabsModule,
+                    TabsRoutingView1Component, TabsRoutingView2Component, TabsRoutingView3Component
+                ],
+                ngDeclarations: [
+                    TabsSample6Component, TabsRoutingView1Component, TabsRoutingView2Component,
+                    TabsRoutingView3Component
+                ],
+                ngImports: [
+                    IgxGridModule, IgxSelectModule, IgxTabsModule,
+                    `
+                    RouterModule.forRoot([
+                        { path: 'arrivals', component: TabsRoutingView1Component },
+                        { path: 'departures', component: TabsRoutingView2Component },
+                        { path: 'canceled', component: TabsRoutingView3Component }
+                    ])
+                    `
+                ]
+            }),
+            shortenComponentPathBy: "/layouts/tabs/"
+        }));
+
         return configs;
     }
 }

src/app/layouts/layouts-routes-data.ts

@@ -20,9 +20,11 @@ export const layoutsRoutesData = {
     "tabbar": { displayName: "Bottom Navigation Overview", parentName: "Bottom Navigation" },
     "tabbar-sample-1": { displayName: "Bottom Navigation Simple Panels", parentName: "Bottom Navigation" },
     "tabbar-sample-2": { displayName: "Bottom Navigation Customizing Panels", parentName: "Bottom Navigation" },
+    "tabbar-sample-3": { displayName: "Bottom Navigation Routing", parentName: "Bottom Navigation" },
     "tabs-sample-1": { displayName: "Tabs Overview", parentName: "Tabs" },
     "tabs-sample-2": { displayName: "Tabs Types", parentName: "Tabs" },
     "tabs-sample-3": { displayName: "Tabs Customizing", parentName: "Tabs" },
+    "tabs-sample-6": { displayName: "Tabs Routing", parentName: "Tabs" },
     "card-sample-0": { displayName: "Elevated Card", parentName: "Card" },
     "card-sample-1": { displayName: "Outlined Card", parentName: "Card" },
     "card-sample-2": { displayName: "Horizontal Card", parentName: "Card" },

src/app/layouts/layouts-routing.module.ts

@@ -30,12 +30,22 @@ import { LayoutComponent } from "./layout/layout.component";
 import { layoutsRoutesData } from "./layouts-routes-data";
 import { TabbarSample1Component } from "./tabbar/tabbar-sample-1/tabbar-sample-1.component";
 import { TabbarSample2Component } from "./tabbar/tabbar-sample-2/tabbar-sample-2.component";
+import {
+    BottomNavRoutingView1Component,
+    BottomNavRoutingView2Component,
+    BottomNavRoutingView3Component,
+    TabbarSample3Component } from "./tabbar/tabbar-sample-3/tabbar-sample-3.component";
 import { TabbarComponent } from "./tabbar/tabbar.component";
 import { TabsSample1Component } from "./tabs/tabs-sample-1/tabs-sample-1.component";
 import { TabsSample2Component } from "./tabs/tabs-sample-2/tabs-sample-2.component";
 import { TabsSample3Component } from "./tabs/tabs-sample-3/tabs-sample-3.component";
 import { TabsSample4Component } from "./tabs/tabs-sample-4/components/tabs-sample-4.component";
 import { TabsSample5Component } from "./tabs/tabs-sample-5/components/tabs-sample-5.component";
+import {
+    TabsRoutingView1Component,
+    TabsRoutingView2Component,
+    TabsRoutingView3Component,
+    TabsSample6Component} from "./tabs/tabs-sample-6/tabs-sample-6.component";
 
 export const layoutsRoutes: Routes = [
     {
@@ -157,6 +167,16 @@ export const layoutsRoutes: Routes = [
         data: layoutsRoutesData["tabbar-sample-2"],
         path: "tabbar-sample-2"
     },
+    {
+        children: [
+            { path: "arrivals",   component: BottomNavRoutingView1Component },
+            { path: "departures", component: BottomNavRoutingView2Component },
+            { path: "canceled",   component: BottomNavRoutingView3Component }
+        ],
+        component: TabbarSample3Component,
+        data: layoutsRoutesData["tabbar-sample-3"],
+        path: "tabbar-sample-3"
+    },
     {
         component: TabsSample1Component,
         data: layoutsRoutesData["tabs-sample-1"],
@@ -180,6 +200,16 @@ export const layoutsRoutes: Routes = [
         component: TabsSample5Component,
         path: "tabs-sample-5"
     },
+    {
+        children: [
+            { path: "arrivals",   component: TabsRoutingView1Component },
+            { path: "departures", component: TabsRoutingView2Component },
+            { path: "canceled",   component: TabsRoutingView3Component }
+        ],
+        component: TabsSample6Component,
+        data: layoutsRoutesData["tabs-sample-6"],
+        path: "tabs-sample-6"
+    },
     {
         component: CardComponent,
         data: layoutsRoutesData["card-sample-0"],

src/app/layouts/layouts.module.ts

@@ -7,6 +7,7 @@ import {
     IgxButtonModule,
     IgxCardModule,
     IgxCarouselModule,
+    IgxCheckboxModule,
     IgxDividerModule,
     IgxExpansionPanelModule,
     IgxGridModule,
@@ -16,7 +17,9 @@ import {
     IgxListModule,
     IgxNavbarModule,
     IgxProgressBarModule,
+    IgxRadioModule,
     IgxRippleModule,
+    IgxSelectModule,
     IgxSliderModule,
     IgxTabsModule,
     IgxToastModule
@@ -50,18 +53,31 @@ import {LayoutComponent} from "./layout/layout.component";
 import {LayoutsRoutingModule} from "./layouts-routing.module";
 import {TabbarSample1Component} from "./tabbar/tabbar-sample-1/tabbar-sample-1.component";
 import {TabbarSample2Component} from "./tabbar/tabbar-sample-2/tabbar-sample-2.component";
+import {
+    BottomNavRoutingView1Component,
+    BottomNavRoutingView2Component,
+    BottomNavRoutingView3Component,
+    TabbarSample3Component} from "./tabbar/tabbar-sample-3/tabbar-sample-3.component";
 import {TabbarComponent} from "./tabbar/tabbar.component";
 import {TabsSample1Component} from "./tabs/tabs-sample-1/tabs-sample-1.component";
 import {TabsSample2Component} from "./tabs/tabs-sample-2/tabs-sample-2.component";
 import {TabsSample3Component} from "./tabs/tabs-sample-3/tabs-sample-3.component";
 import {TabsSample4Component} from "./tabs/tabs-sample-4/components/tabs-sample-4.component";
 import {TabsSample5Component} from "./tabs/tabs-sample-5/components/tabs-sample-5.component";
+import {
+    TabsRoutingView1Component,
+    TabsRoutingView2Component,
+    TabsRoutingView3Component,
+    TabsSample6Component} from "./tabs/tabs-sample-6/tabs-sample-6.component";
 
 @NgModule({
     declarations: [
         AvatarSample1Component,
         AvatarSample2Component,
         AvatarSample3Component,
+        BottomNavRoutingView1Component,
+        BottomNavRoutingView2Component,
+        BottomNavRoutingView3Component,
         CardSample1Component,
         CardSample2Component,
         CardSample3Component,
@@ -87,6 +103,11 @@ import {TabsSample5Component} from "./tabs/tabs-sample-5/components/tabs-sample-
         LayoutComponent,
         TabbarSample1Component,
         TabbarSample2Component,
+        TabbarSample3Component,
+        TabsRoutingView1Component,
+        TabsRoutingView2Component,
+        TabsRoutingView3Component,
+        TabsSample6Component,
         TabbarComponent,
         TabsSample1Component,
         TabsSample2Component,
@@ -106,6 +127,7 @@ import {TabsSample5Component} from "./tabs/tabs-sample-5/components/tabs-sample-
         IgxButtonModule,
         IgxCardModule,
         IgxCarouselModule,
+        IgxCheckboxModule,
         IgxDividerModule,
         IgxExpansionPanelModule,
         IgxGridModule,
@@ -115,7 +137,9 @@ import {TabsSample5Component} from "./tabs/tabs-sample-5/components/tabs-sample-
         IgxListModule,
         IgxNavbarModule,
         IgxProgressBarModule,
+        IgxRadioModule,
         IgxRippleModule,
+        IgxSelectModule,
         IgxSliderModule,
         IgxTabsModule,
         IgxToastModule

src/app/layouts/tabbar/tabbar-sample-3/tabbar-sample-3.component.html

@@ -0,0 +1,28 @@
+<igx-select [value]="currentDocumentLocation" (onSelection)="handleSelection($event)">
+    <label igxLabel>URL</label>
+    <igx-select-item *ngFor="let aLocation of urlLocations" [value]="aLocation">
+        {{ aLocation }}
+    </igx-select-item>
+</igx-select>
+
+<router-outlet></router-outlet>
+
+<igx-bottom-nav>
+    <igx-tab label="Arrivals" icon="flight_land"
+        routerLink="arrivals"
+        routerLinkActive #rla1="routerLinkActive"
+        [isSelected]="rla1.isActive">
+    </igx-tab>
+
+    <igx-tab label="Departures" icon="flight_takeoff"
+        routerLink="departures"
+        routerLinkActive #rla2="routerLinkActive"
+        [isSelected]="rla2.isActive">
+    </igx-tab>
+
+    <igx-tab label="Canceled" icon="cancel"
+        routerLink="canceled"
+        routerLinkActive #rla3="routerLinkActive"
+        [isSelected]="rla3.isActive">
+    </igx-tab>
+</igx-bottom-nav>

src/app/layouts/tabbar/tabbar-sample-3/tabbar-sample-3.component.ts

@@ -0,0 +1,103 @@
+import { Component, OnInit } from "@angular/core";
+import { Router } from "@angular/router";
+import { ISelectionEventArgs } from "igniteui-angular";
+
+@Component({
+    selector: "app-tabbar-sample-3",
+    styleUrls: ["tabbar-sample-3.component.scss"],
+    templateUrl: "tabbar-sample-3.component.html"
+})
+export class TabbarSample3Component implements OnInit {
+    public urlLocations = [
+        "",
+        "/arrivals",
+        "/departures",
+        "/canceled"
+    ];
+
+    constructor(private router: Router) { }
+
+    public get currentDocumentLocation() {
+        return document.location.pathname;
+    }
+
+    public ngOnInit() {
+        const currentAddress: string = document.location.href;
+        if (currentAddress.indexOf("/samples/layouts") !== -1) {
+            for (let i = 0; i < this.urlLocations.length; i++) {
+                this.urlLocations[i] = "/samples/layouts/tabbar-sample-3" + this.urlLocations[i];
+            }
+        } else
+        if (currentAddress.indexOf("/layouts") !== -1) {
+            for (let i = 0; i < this.urlLocations.length; i++) {
+                this.urlLocations[i] = "/layouts/tabbar-sample-3" + this.urlLocations[i];
+            }
+        }
+    }
+
+    public handleSelection(eventArgs: ISelectionEventArgs): void {
+        this.router.navigateByUrl(eventArgs.newSelection.value);
+    }
+}
+
+@Component({
+    template: `
+        <br>
+        <igx-grid [data]="data">
+            <igx-column [field]="'Flight'" width="100"></igx-column>
+            <igx-column [field]="'From'" width="120"></igx-column>
+            <igx-column [field]="'Time'" width="100"></igx-column>
+            <igx-column [field]="'Status'" width="120"></igx-column>
+        </igx-grid>
+    `
+})
+export class BottomNavRoutingView1Component {
+    public data = [
+        { Flight: "LH1702", From: "Munich", Time: "12:25", Status: "Landed"},
+        { Flight: "W64332", From: "Dortmund", Time: "12:25", Status: "Expected"},
+        { Flight: "W64428", From: "Tel Aviv", Time: "12:40", Status: "Expected"},
+        { Flight: "OS795", From: "Vienna", Time: "12:45", Status: "Expected"},
+        { Flight: "UA9832", From: "Vienna", Time: "12:45", Status: "Expected"}
+    ];
+}
+
+@Component({
+    template: `
+        <br>
+        <igx-grid [data]="data">
+            <igx-column [field]="'Flight'" width="100"></igx-column>
+            <igx-column [field]="'From'" width="120"></igx-column>
+            <igx-column [field]="'Time'" width="100"></igx-column>
+            <igx-column [field]="'Status'" width="120"></igx-column>
+        </igx-grid>
+    `
+})
+export class BottomNavRoutingView2Component {
+    public data = [
+        { Flight: "SU2061", From: "Moscow", Time: "12:25", Status: "Boarding"},
+        { Flight: "FB1363", From: "Moscow", Time: "12:25", Status: "Boarding"},
+        { Flight: "FB491", From: "Zurich", Time: "12:30", Status: "Taxing"},
+        { Flight: "FR6043", From: "Munich", Time: "12:40", Status: "Boarding"},
+        { Flight: "W64329", From: "Frankfurt", Time: "12:55", Status: "Expected"},
+        { Flight: "QR228", From: "Doha", Time: "13:00", Status: "Check-in"}
+    ];
+}
+
+@Component({
+    template: `
+        <br>
+        <igx-grid [data]="data">
+            <igx-column [field]="'Flight'" width="100"></igx-column>
+            <igx-column [field]="'From'" width="120"></igx-column>
+            <igx-column [field]="'Time'" width="100"></igx-column>
+            <igx-column [field]="'Status'" width="120"></igx-column>
+        </igx-grid>
+    `
+})
+export class BottomNavRoutingView3Component {
+    public data = [
+        { Flight: "FB1363", From: "Moscow", Time: "12:25", Status: "Cancelled"},
+        { Flight: "FB491", From: "Zurich", Time: "12:30", Status: "Cancelled"},
+        { Flight: "FB437", From: "Frankfurt", Time: "12:45", Status: "Cancelled"}
+    ];
+}