From 46c89b58c72eedb9407c603e32517634e69925a9 Mon Sep 17 00:00:00 2001
From: Radko Kolev <radko.kolev@gmail.com>
Date: Mon, 1 Jul 2019 15:03:01 +0300
Subject: [PATCH 01/11] feat(bottomNav): adding bottomNav routing sample

---
 .../tabbar-sample-3/tabbar-sample-3.component.html  |  0
 .../tabbar-sample-3/tabbar-sample-3.component.scss  |  0
 .../tabbar-sample-3/tabbar-sample-3.component.ts    | 13 +++++++++++++
 3 files changed, 13 insertions(+)
 create mode 100644 src/app/layouts/tabbar/tabbar-sample-3/tabbar-sample-3.component.html
 create mode 100644 src/app/layouts/tabbar/tabbar-sample-3/tabbar-sample-3.component.scss
 create mode 100644 src/app/layouts/tabbar/tabbar-sample-3/tabbar-sample-3.component.ts

diff --git a/src/app/layouts/tabbar/tabbar-sample-3/tabbar-sample-3.component.html b/src/app/layouts/tabbar/tabbar-sample-3/tabbar-sample-3.component.html
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/app/layouts/tabbar/tabbar-sample-3/tabbar-sample-3.component.scss b/src/app/layouts/tabbar/tabbar-sample-3/tabbar-sample-3.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/app/layouts/tabbar/tabbar-sample-3/tabbar-sample-3.component.ts b/src/app/layouts/tabbar/tabbar-sample-3/tabbar-sample-3.component.ts
new file mode 100644
index 0000000000..a3b62953fb
--- /dev/null
+++ b/src/app/layouts/tabbar/tabbar-sample-3/tabbar-sample-3.component.ts
@@ -0,0 +1,13 @@
+import { Component } from "@angular/core";
+
+@Component({
+selector: "app-tabbar-sample-3",
+styleUrls: ["tabbar-sample-3.component.scss"],
+templateUrl: "tabbar-sample-3.component.html"
+})
+export class TabbarSample3Component {
+
+    constructor() {
+    }
+
+}

From d7ca3a1f9677abac034a5a5b2a6088039bb9c106 Mon Sep 17 00:00:00 2001
From: Radko Kolev <radko.kolev@gmail.com>
Date: Mon, 8 Jul 2019 16:09:01 +0300
Subject: [PATCH 02/11] adding routing samples for tabs and bottomNav
 components IgniteUI/igniteui-angular#4297

---
 src/app/layouts/layouts-routes-data.ts        |  2 +
 src/app/layouts/layouts-routing.module.ts     | 30 +++++++
 src/app/layouts/layouts.module.ts             | 22 +++++
 .../tabbar-sample-3.component.html            | 33 +++++++
 .../tabbar-sample-3.component.scss            |  1 +
 .../tabbar-sample-3.component.ts              | 81 ++++++++++++++++-
 .../tabs-sample-6.component.html              | 33 +++++++
 .../tabs-sample-6.component.scss              |  1 +
 .../tabs-sample-6/tabs-sample-6.component.ts  | 86 +++++++++++++++++++
 9 files changed, 285 insertions(+), 4 deletions(-)
 create mode 100644 src/app/layouts/tabs/tabs-sample-6/tabs-sample-6.component.html
 create mode 100644 src/app/layouts/tabs/tabs-sample-6/tabs-sample-6.component.scss
 create mode 100644 src/app/layouts/tabs/tabs-sample-6/tabs-sample-6.component.ts

diff --git a/src/app/layouts/layouts-routes-data.ts b/src/app/layouts/layouts-routes-data.ts
index acc94078ae..2d5fa8b13a 100644
--- a/src/app/layouts/layouts-routes-data.ts
+++ b/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" },
diff --git a/src/app/layouts/layouts-routing.module.ts b/src/app/layouts/layouts-routing.module.ts
index 23e357d781..69cccf678a 100644
--- a/src/app/layouts/layouts-routing.module.ts
+++ b/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: "view1", component: BottomNavRoutingView1Component },
+            { path: "view2", component: BottomNavRoutingView2Component },
+            { path: "view3", 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: "view1", component: TabsRoutingView1Component },
+            { path: "view2", component: TabsRoutingView2Component },
+            { path: "view3", component: TabsRoutingView3Component }
+        ],
+        component: TabsSample6Component,
+        data: layoutsRoutesData["tabs-sample-6"],
+        path: "tabs-sample-6"
+    },
     {
         component: CardComponent,
         data: layoutsRoutesData["card-sample-0"],
diff --git a/src/app/layouts/layouts.module.ts b/src/app/layouts/layouts.module.ts
index 3822d76fcf..ef785243da 100644
--- a/src/app/layouts/layouts.module.ts
+++ b/src/app/layouts/layouts.module.ts
@@ -7,6 +7,7 @@ import {
     IgxButtonModule,
     IgxCardModule,
     IgxCarouselModule,
+    IgxCheckboxModule,
     IgxDividerModule,
     IgxExpansionPanelModule,
     IgxGridModule,
@@ -16,6 +17,7 @@ import {
     IgxListModule,
     IgxNavbarModule,
     IgxProgressBarModule,
+    IgxRadioModule,
     IgxRippleModule,
     IgxSliderModule,
     IgxTabsModule,
@@ -50,18 +52,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 +102,11 @@ import {TabsSample5Component} from "./tabs/tabs-sample-5/components/tabs-sample-
         LayoutComponent,
         TabbarSample1Component,
         TabbarSample2Component,
+        TabbarSample3Component,
+        TabsRoutingView1Component,
+        TabsRoutingView2Component,
+        TabsRoutingView3Component,
+        TabsSample6Component,
         TabbarComponent,
         TabsSample1Component,
         TabsSample2Component,
@@ -106,6 +126,7 @@ import {TabsSample5Component} from "./tabs/tabs-sample-5/components/tabs-sample-
         IgxButtonModule,
         IgxCardModule,
         IgxCarouselModule,
+        IgxCheckboxModule,
         IgxDividerModule,
         IgxExpansionPanelModule,
         IgxGridModule,
@@ -115,6 +136,7 @@ import {TabsSample5Component} from "./tabs/tabs-sample-5/components/tabs-sample-
         IgxListModule,
         IgxNavbarModule,
         IgxProgressBarModule,
+        IgxRadioModule,
         IgxRippleModule,
         IgxSliderModule,
         IgxTabsModule,
diff --git a/src/app/layouts/tabbar/tabbar-sample-3/tabbar-sample-3.component.html b/src/app/layouts/tabbar/tabbar-sample-3/tabbar-sample-3.component.html
index e69de29bb2..05e9567304 100644
--- a/src/app/layouts/tabbar/tabbar-sample-3/tabbar-sample-3.component.html
+++ b/src/app/layouts/tabbar/tabbar-sample-3/tabbar-sample-3.component.html
@@ -0,0 +1,33 @@
+<div class="addrBar">
+    URL: 
+    <button igxButton="flat"
+        [igxToggleAction]="dropdown"
+        [igxDropDownItemNavigation]="dropdown">{{ currentDocumentLocation }}</button>
+</div>
+<igx-drop-down #dropdown [width]="'100px'" (onSelection)="onDropDownSelection($event)">
+    <igx-drop-down-item *ngFor="let aLocation of urlLocations" [value]="aLocation.url">{{ aLocation.label }}</igx-drop-down-item>
+</igx-drop-down>
+
+Presenting several input components:<br>
+
+<router-outlet></router-outlet>
+
+<igx-bottom-nav>
+    <igx-tab label="Push Buttons" icon="dashboard"
+        routerLink="view1"
+        routerLinkActive #rla1="routerLinkActive"
+        [isSelected]="rla1.isActive">
+    </igx-tab>
+
+    <igx-tab label="Checkbox Buttons" icon="check_circle_outline"
+        routerLink="view2"
+        routerLinkActive #rla2="routerLinkActive"
+        [isSelected]="rla2.isActive">
+    </igx-tab>
+
+    <igx-tab label="Radio Buttons" icon="radio_button_checked"
+        routerLink="view3"
+        routerLinkActive #rla3="routerLinkActive"
+        [isSelected]="rla3.isActive">
+    </igx-tab>
+</igx-bottom-nav>
diff --git a/src/app/layouts/tabbar/tabbar-sample-3/tabbar-sample-3.component.scss b/src/app/layouts/tabbar/tabbar-sample-3/tabbar-sample-3.component.scss
index e69de29bb2..3f742cc0f5 100644
--- a/src/app/layouts/tabbar/tabbar-sample-3/tabbar-sample-3.component.scss
+++ b/src/app/layouts/tabbar/tabbar-sample-3/tabbar-sample-3.component.scss
@@ -0,0 +1 @@
+.addrBar { background: lightgray; padding: 5px; }
diff --git a/src/app/layouts/tabbar/tabbar-sample-3/tabbar-sample-3.component.ts b/src/app/layouts/tabbar/tabbar-sample-3/tabbar-sample-3.component.ts
index a3b62953fb..7c511af4f3 100644
--- a/src/app/layouts/tabbar/tabbar-sample-3/tabbar-sample-3.component.ts
+++ b/src/app/layouts/tabbar/tabbar-sample-3/tabbar-sample-3.component.ts
@@ -1,13 +1,86 @@
 import { Component } from "@angular/core";
+import { ISelectionEventArgs } from "igniteui-angular";
 
 @Component({
-selector: "app-tabbar-sample-3",
-styleUrls: ["tabbar-sample-3.component.scss"],
-templateUrl: "tabbar-sample-3.component.html"
+    selector: "app-tabbar-sample-3",
+    styleUrls: ["tabbar-sample-3.component.scss"],
+    templateUrl: "tabbar-sample-3.component.html"
 })
 export class TabbarSample3Component {
+    public urlLocations = [
+        { label: "View 1", url: "view1" },
+        { label: "View 2", url: "view2" },
+        { label: "View 3", url: "view3" }
+    ];
 
-    constructor() {
+    constructor() { }
+
+    public get currentDocumentLocation() {
+        return document.location.href;
+    }
+
+    public onDropDownSelection(eventArgs: ISelectionEventArgs) {
+        const currentAddress: string = document.location.href;
+        let baseAddress: string;
+        if (currentAddress.indexOf("samples") !== -1) {
+            baseAddress = "/samples/layouts/tabbar-sample-3/";
+        } else {
+            baseAddress = "/layouts/tabbar-sample-3/";
+        }
+        document.location.href = baseAddress + eventArgs.newSelection.value;
     }
+}
+
+@Component({
+    styles: [
+        ":host { display: flex; flex-flow: column nowrap; padding: 10px; }"
+    ],
+    template: `
+        Push Buttons
+        <div style="display: flex; justify-content: space-around; align-items: center; ">
+            <button igxButton="flat" igxRipple>Flat</button> <br>
+            <button igxButton="raised" igxRipple>Raised</button> <br>
+            <button igxButton="outlined" igxRipple>Outlined</button> <br>
+            <button igxButton="icon" igxRipple>
+                <igx-icon fontSet="material">favorite</igx-icon>
+            </button> <br>
+            <button igxButton="fab" igxRipple>
+                <igx-icon fontSet="material">favorite</igx-icon>
+            </button>
+        </div>
+    `
+})
+export class BottomNavRoutingView1Component {
+}
 
+@Component({
+    styles: [
+        ":host { display: flex; flex-flow: column nowrap; padding: 10px; }",
+        "igx-checkbox { margin-top: 16px; }"
+    ],
+    template: `
+        Checkbox Buttons
+        <igx-checkbox [checked]="true">Research</igx-checkbox>
+        <igx-checkbox [checked]="true">Design</igx-checkbox>
+        <igx-checkbox [checked]="false">Implement</igx-checkbox>
+        <igx-checkbox [checked]="false">Test</igx-checkbox>
+        <igx-checkbox [checked]="false">Integrate</igx-checkbox>
+    `
+})
+export class BottomNavRoutingView2Component {
+}
+
+@Component({
+    styles: [
+        ":host { display: flex; flex-flow: column nowrap; padding: 10px; }",
+        "igx-radio { margin-top: 16px; }"
+    ],
+    template: `
+        Radio Buttons
+        <igx-radio *ngFor="let food of foods" [(ngModel)]="selectedFood" value="{{ food }}">{{ food }}</igx-radio>
+    `
+})
+export class BottomNavRoutingView3Component {
+    public foods = ["Apple", "Apricot", "Banana", "Nectarine", "Orange"];
+    public selectedFood: string = this.foods[2];
 }
diff --git a/src/app/layouts/tabs/tabs-sample-6/tabs-sample-6.component.html b/src/app/layouts/tabs/tabs-sample-6/tabs-sample-6.component.html
new file mode 100644
index 0000000000..01c4d18629
--- /dev/null
+++ b/src/app/layouts/tabs/tabs-sample-6/tabs-sample-6.component.html
@@ -0,0 +1,33 @@
+<div class="addrBar">
+    URL: 
+    <button igxButton="flat"
+        [igxToggleAction]="dropdown"
+        [igxDropDownItemNavigation]="dropdown">{{ currentDocumentLocation }}</button>
+</div>
+<igx-drop-down #dropdown [width]="'100px'" (onSelection)="onDropDownSelection($event)">
+    <igx-drop-down-item *ngFor="let aLocation of urlLocations" [value]="aLocation.url">{{ aLocation.label }}</igx-drop-down-item>
+</igx-drop-down>
+
+Presenting several input components<br>
+
+<igx-tabs>
+    <igx-tab-item label="Push Buttons" icon="dashboard"
+        routerLink="view1"
+        routerLinkActive #rla1="routerLinkActive"
+        [isSelected]="rla1.isActive">
+    </igx-tab-item>
+    
+    <igx-tab-item label="Checkbox Buttons" icon="check_circle_outline"
+        routerLink="view2"
+        routerLinkActive #rla2="routerLinkActive"
+        [isSelected]="rla2.isActive">
+    </igx-tab-item>
+
+    <igx-tab-item label="Radio Buttons" icon="radio_button_checked"
+        routerLink="view3"
+        routerLinkActive #rla3="routerLinkActive"
+        [isSelected]="rla3.isActive">
+    </igx-tab-item>
+</igx-tabs>
+
+<router-outlet></router-outlet>
diff --git a/src/app/layouts/tabs/tabs-sample-6/tabs-sample-6.component.scss b/src/app/layouts/tabs/tabs-sample-6/tabs-sample-6.component.scss
new file mode 100644
index 0000000000..335fa5454b
--- /dev/null
+++ b/src/app/layouts/tabs/tabs-sample-6/tabs-sample-6.component.scss
@@ -0,0 +1 @@
+.addrBar { background: lightgray; padding: 5px; }
\ No newline at end of file
diff --git a/src/app/layouts/tabs/tabs-sample-6/tabs-sample-6.component.ts b/src/app/layouts/tabs/tabs-sample-6/tabs-sample-6.component.ts
new file mode 100644
index 0000000000..e6b0aa2678
--- /dev/null
+++ b/src/app/layouts/tabs/tabs-sample-6/tabs-sample-6.component.ts
@@ -0,0 +1,86 @@
+import { Component } from "@angular/core";
+import { ISelectionEventArgs } from "igniteui-angular";
+
+@Component({
+    selector: "app-tabs-sample-6",
+    styleUrls: ["./tabs-sample-6.component.scss"],
+    templateUrl: "./tabs-sample-6.component.html"
+})
+export class TabsSample6Component {
+    public urlLocations = [
+        { label: "View 1", url: "view1" },
+        { label: "View 2", url: "view2" },
+        { label: "View 3", url: "view3" }
+    ];
+
+    constructor() { }
+
+    public get currentDocumentLocation() {
+        return document.location.href;
+    }
+
+    public onDropDownSelection(eventArgs: ISelectionEventArgs) {
+        const currentAddress: string = document.location.href;
+        let baseAddress: string;
+        if (currentAddress.indexOf("samples") !== -1) {
+            baseAddress = "/samples/layouts/tabs-sample-6/";
+        } else {
+            baseAddress = "/layouts/tabs-sample-6/";
+        }
+        document.location.href = baseAddress + eventArgs.newSelection.value;
+    }
+}
+
+@Component({
+    styles: [
+        ":host { display: flex; flex-flow: column nowrap; padding: 10px; }"
+    ],
+    template: `
+        Push Buttons
+        <div style="display: flex; justify-content: space-around; align-items: center; ">
+            <button igxButton="flat" igxRipple>Flat</button> <br>
+            <button igxButton="raised" igxRipple>Raised</button> <br>
+            <button igxButton="outlined" igxRipple>Outlined</button> <br>
+            <button igxButton="icon" igxRipple>
+                <igx-icon fontSet="material">favorite</igx-icon>
+            </button> <br>
+            <button igxButton="fab" igxRipple>
+                <igx-icon fontSet="material">favorite</igx-icon>
+            </button>
+        </div>
+    `
+})
+export class TabsRoutingView1Component {
+}
+
+@Component({
+    styles: [
+        ":host { display: flex; flex-flow: column nowrap; padding: 10px; }",
+        "igx-checkbox { margin-top: 16px; }"
+    ],
+    template: `
+        Checkbox Buttons
+        <igx-checkbox [checked]="true">Research</igx-checkbox>
+        <igx-checkbox [checked]="true">Design</igx-checkbox>
+        <igx-checkbox [checked]="false">Implement</igx-checkbox>
+        <igx-checkbox [checked]="false">Test</igx-checkbox>
+        <igx-checkbox [checked]="false">Integrate</igx-checkbox>
+    `
+})
+export class TabsRoutingView2Component {
+}
+
+@Component({
+    styles: [
+        ":host { display: flex; flex-flow: column nowrap; padding: 10px; }",
+        "igx-radio { margin-top: 16px; }"
+    ],
+    template: `
+        Radio Buttons
+        <igx-radio *ngFor="let food of foods" [(ngModel)]="selectedFood" value="{{ food }}">{{ food }}</igx-radio>
+    `
+})
+export class TabsRoutingView3Component {
+    public foods = ["Apple", "Apricot", "Banana", "Nectarine", "Orange"];
+    public selectedFood: string = this.foods[2];
+}

From 6de35b4de226e69cbd7ba93f2e5e732c62c2c4a6 Mon Sep 17 00:00:00 2001
From: Radko Kolev <radko.kolev@gmail.com>
Date: Tue, 9 Jul 2019 14:42:48 +0300
Subject: [PATCH 03/11] adding config generators for the tab controls routing
 samples IgniteUI/igniteui-angular#4297

---
 live-editing/configs/TabBarConfigGenerator.ts | 20 ++++++++++++++++--
 live-editing/configs/TabsConfigGenerator.ts   | 21 +++++++++++++++++--
 2 files changed, 37 insertions(+), 4 deletions(-)

diff --git a/live-editing/configs/TabBarConfigGenerator.ts b/live-editing/configs/TabBarConfigGenerator.ts
index 3c42f08217..b1f43a0e37 100644
--- a/live-editing/configs/TabBarConfigGenerator.ts
+++ b/live-editing/configs/TabBarConfigGenerator.ts
@@ -1,9 +1,10 @@
 /* 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, IgxCheckboxModule, IgxDropDownModule,
+    IgxIconModule, IgxListModule, IgxRadioModule, IgxRippleModule, IgxToggleModule } 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 { 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 +55,21 @@ export class TabBarConfigGenerator implements IConfigGenerator {
             shortenComponentPathBy: "/layouts/tabbar/"
         }));
 
+        // tabbar sample 3
+        configs.push(new Config({
+            component: TabbarSample3Component,
+            appModuleConfig: new AppModuleConfig({
+                imports: [TabbarSample3Component, IgxBottomNavModule, IgxButtonModule, IgxCheckboxModule,
+                    IgxDropDownModule, IgxIconModule, IgxRadioModule, IgxRippleModule, IgxToggleModule
+                ],
+                ngDeclarations: [TabbarSample3Component],
+                ngImports: [IgxBottomNavModule, IgxButtonModule, IgxCheckboxModule, IgxDropDownModule,
+                    IgxIconModule, IgxRadioModule, IgxRippleModule, IgxToggleModule
+                ]
+            }),
+            shortenComponentPathBy: "/layouts/tabbar/"
+        }));
+
         return configs;
     }
 }
diff --git a/live-editing/configs/TabsConfigGenerator.ts b/live-editing/configs/TabsConfigGenerator.ts
index 2f9b9166fd..bbbb23bbc7 100644
--- a/live-editing/configs/TabsConfigGenerator.ts
+++ b/live-editing/configs/TabsConfigGenerator.ts
@@ -1,7 +1,7 @@
 /* tslint:disable:object-literal-sort-keys */
 import {
-    IgxAvatarModule, IgxButtonModule, IgxCardModule, IgxIconModule,
-    IgxNavbarModule, IgxRippleModule, IgxTabsModule
+    IgxAvatarModule, IgxButtonModule, IgxCardModule, IgxCheckboxModule, IgxDropDownModule, IgxIconModule,
+    IgxNavbarModule, IgxRadioModule, IgxRippleModule, IgxTabsModule, IgxToggleModule
 } from "igniteui-angular";
 
 import { TabsSample1Component } from "../../src/app/layouts/tabs/tabs-sample-1/tabs-sample-1.component";
@@ -15,6 +15,7 @@ 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 { 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 +103,22 @@ export class TabsConfigGenerator implements IConfigGenerator {
             shortenComponentPathBy: "/layouts/tabs/"
         }));
 
+        configs.push(new Config({
+            component: TabsSample6Component,
+            appModuleConfig: new AppModuleConfig({
+                imports: [
+                    TabsSample6Component, IgxButtonModule, IgxCheckboxModule, IgxDropDownModule, IgxIconModule,
+                    IgxRadioModule, IgxRippleModule, IgxTabsModule, IgxToggleModule
+                ],
+                ngDeclarations: [TabsSample6Component],
+                ngImports: [
+                    IgxButtonModule, IgxCheckboxModule, IgxDropDownModule, IgxRadioModule, IgxIconModule,
+                    IgxRippleModule, IgxTabsModule, IgxToggleModule
+                ]
+            }),
+            shortenComponentPathBy: "/layouts/tabs/"
+        }));
+
         return configs;
     }
 }

From 0e24bc1b37607a7bcc8dac520f00a5ffcf4bb5a2 Mon Sep 17 00:00:00 2001
From: Radko Kolev <radko.kolev@gmail.com>
Date: Tue, 9 Jul 2019 16:37:49 +0300
Subject: [PATCH 04/11] changing labels, fixing config generators

---
 live-editing/configs/TabBarConfigGenerator.ts         |  6 ++++--
 live-editing/configs/TabsConfigGenerator.ts           | 11 +++++++----
 .../tabbar-sample-3/tabbar-sample-3.component.html    |  2 +-
 .../tabs/tabs-sample-6/tabs-sample-6.component.html   |  2 +-
 4 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/live-editing/configs/TabBarConfigGenerator.ts b/live-editing/configs/TabBarConfigGenerator.ts
index b1f43a0e37..be8c73879a 100644
--- a/live-editing/configs/TabBarConfigGenerator.ts
+++ b/live-editing/configs/TabBarConfigGenerator.ts
@@ -59,11 +59,13 @@ export class TabBarConfigGenerator implements IConfigGenerator {
         configs.push(new Config({
             component: TabbarSample3Component,
             appModuleConfig: new AppModuleConfig({
-                imports: [TabbarSample3Component, IgxBottomNavModule, IgxButtonModule, IgxCheckboxModule,
+                imports: [
+                    RouterModule, TabbarSample3Component, IgxBottomNavModule, IgxButtonModule, IgxCheckboxModule,
                     IgxDropDownModule, IgxIconModule, IgxRadioModule, IgxRippleModule, IgxToggleModule
                 ],
                 ngDeclarations: [TabbarSample3Component],
-                ngImports: [IgxBottomNavModule, IgxButtonModule, IgxCheckboxModule, IgxDropDownModule,
+                ngImports: [
+                    RouterModule, IgxBottomNavModule, IgxButtonModule, IgxCheckboxModule, IgxDropDownModule,
                     IgxIconModule, IgxRadioModule, IgxRippleModule, IgxToggleModule
                 ]
             }),
diff --git a/live-editing/configs/TabsConfigGenerator.ts b/live-editing/configs/TabsConfigGenerator.ts
index bbbb23bbc7..2d03b18230 100644
--- a/live-editing/configs/TabsConfigGenerator.ts
+++ b/live-editing/configs/TabsConfigGenerator.ts
@@ -1,4 +1,7 @@
 /* tslint:disable:object-literal-sort-keys */
+
+import { RouterModule } from "@angular/router";
+
 import {
     IgxAvatarModule, IgxButtonModule, IgxCardModule, IgxCheckboxModule, IgxDropDownModule, IgxIconModule,
     IgxNavbarModule, IgxRadioModule, IgxRippleModule, IgxTabsModule, IgxToggleModule
@@ -107,13 +110,13 @@ export class TabsConfigGenerator implements IConfigGenerator {
             component: TabsSample6Component,
             appModuleConfig: new AppModuleConfig({
                 imports: [
-                    TabsSample6Component, IgxButtonModule, IgxCheckboxModule, IgxDropDownModule, IgxIconModule,
-                    IgxRadioModule, IgxRippleModule, IgxTabsModule, IgxToggleModule
+                    RouterModule, TabsSample6Component, IgxButtonModule, IgxCheckboxModule, IgxDropDownModule,
+                    IgxIconModule, IgxRadioModule, IgxRippleModule, IgxTabsModule, IgxToggleModule
                 ],
                 ngDeclarations: [TabsSample6Component],
                 ngImports: [
-                    IgxButtonModule, IgxCheckboxModule, IgxDropDownModule, IgxRadioModule, IgxIconModule,
-                    IgxRippleModule, IgxTabsModule, IgxToggleModule
+                    RouterModule, IgxButtonModule, IgxCheckboxModule, IgxDropDownModule, IgxRadioModule,
+                    IgxIconModule, IgxRippleModule, IgxTabsModule, IgxToggleModule
                 ]
             }),
             shortenComponentPathBy: "/layouts/tabs/"
diff --git a/src/app/layouts/tabbar/tabbar-sample-3/tabbar-sample-3.component.html b/src/app/layouts/tabbar/tabbar-sample-3/tabbar-sample-3.component.html
index 05e9567304..ea1a3ce9de 100644
--- a/src/app/layouts/tabbar/tabbar-sample-3/tabbar-sample-3.component.html
+++ b/src/app/layouts/tabbar/tabbar-sample-3/tabbar-sample-3.component.html
@@ -8,7 +8,7 @@
     <igx-drop-down-item *ngFor="let aLocation of urlLocations" [value]="aLocation.url">{{ aLocation.label }}</igx-drop-down-item>
 </igx-drop-down>
 
-Presenting several input components:<br>
+Use the tab items to select different group of buttons.<br>
 
 <router-outlet></router-outlet>
 
diff --git a/src/app/layouts/tabs/tabs-sample-6/tabs-sample-6.component.html b/src/app/layouts/tabs/tabs-sample-6/tabs-sample-6.component.html
index 01c4d18629..dbed622dc5 100644
--- a/src/app/layouts/tabs/tabs-sample-6/tabs-sample-6.component.html
+++ b/src/app/layouts/tabs/tabs-sample-6/tabs-sample-6.component.html
@@ -8,7 +8,7 @@
     <igx-drop-down-item *ngFor="let aLocation of urlLocations" [value]="aLocation.url">{{ aLocation.label }}</igx-drop-down-item>
 </igx-drop-down>
 
-Presenting several input components<br>
+Use the tab items to select different group of buttons.<br>
 
 <igx-tabs>
     <igx-tab-item label="Push Buttons" icon="dashboard"

From 3f6a14f9ac84a289e6c17b67f9a7b1703bc0c275 Mon Sep 17 00:00:00 2001
From: Radko Kolev <radko.kolev@gmail.com>
Date: Wed, 10 Jul 2019 17:10:35 +0300
Subject: [PATCH 05/11] changing the samples to use igx-select instead of
 button + dropdown

---
 src/app/layouts/layouts.module.ts             |  2 +
 .../tabbar-sample-3.component.html            | 17 ++++----
 .../tabbar-sample-3.component.scss            |  1 -
 .../tabbar-sample-3.component.ts              | 41 ++++++++++++-------
 .../tabs-sample-6.component.html              | 17 ++++----
 .../tabs-sample-6.component.scss              |  1 -
 .../tabs-sample-6/tabs-sample-6.component.ts  | 41 ++++++++++++-------
 7 files changed, 70 insertions(+), 50 deletions(-)

diff --git a/src/app/layouts/layouts.module.ts b/src/app/layouts/layouts.module.ts
index ef785243da..8fd4043748 100644
--- a/src/app/layouts/layouts.module.ts
+++ b/src/app/layouts/layouts.module.ts
@@ -19,6 +19,7 @@ import {
     IgxProgressBarModule,
     IgxRadioModule,
     IgxRippleModule,
+    IgxSelectModule,
     IgxSliderModule,
     IgxTabsModule,
     IgxToastModule
@@ -138,6 +139,7 @@ import {
         IgxProgressBarModule,
         IgxRadioModule,
         IgxRippleModule,
+        IgxSelectModule,
         IgxSliderModule,
         IgxTabsModule,
         IgxToastModule
diff --git a/src/app/layouts/tabbar/tabbar-sample-3/tabbar-sample-3.component.html b/src/app/layouts/tabbar/tabbar-sample-3/tabbar-sample-3.component.html
index ea1a3ce9de..1473b77068 100644
--- a/src/app/layouts/tabbar/tabbar-sample-3/tabbar-sample-3.component.html
+++ b/src/app/layouts/tabbar/tabbar-sample-3/tabbar-sample-3.component.html
@@ -1,19 +1,16 @@
-<div class="addrBar">
-    URL: 
-    <button igxButton="flat"
-        [igxToggleAction]="dropdown"
-        [igxDropDownItemNavigation]="dropdown">{{ currentDocumentLocation }}</button>
-</div>
-<igx-drop-down #dropdown [width]="'100px'" (onSelection)="onDropDownSelection($event)">
-    <igx-drop-down-item *ngFor="let aLocation of urlLocations" [value]="aLocation.url">{{ aLocation.label }}</igx-drop-down-item>
-</igx-drop-down>
+<igx-select [value]="currentDocumentLocation" (onSelection)="handleSelection($event)">
+    <label igxLabel>URL</label>
+    <igx-select-item *ngFor="let aLocation of urlLocations" [value]="aLocation.url">
+        {{ aLocation.label }}
+    </igx-select-item>
+</igx-select>
 
 Use the tab items to select different group of buttons.<br>
 
 <router-outlet></router-outlet>
 
 <igx-bottom-nav>
-    <igx-tab label="Push Buttons" icon="dashboard"
+    <igx-tab label="Push Buttons" icon="radio_button_unchecked"
         routerLink="view1"
         routerLinkActive #rla1="routerLinkActive"
         [isSelected]="rla1.isActive">
diff --git a/src/app/layouts/tabbar/tabbar-sample-3/tabbar-sample-3.component.scss b/src/app/layouts/tabbar/tabbar-sample-3/tabbar-sample-3.component.scss
index 3f742cc0f5..e69de29bb2 100644
--- a/src/app/layouts/tabbar/tabbar-sample-3/tabbar-sample-3.component.scss
+++ b/src/app/layouts/tabbar/tabbar-sample-3/tabbar-sample-3.component.scss
@@ -1 +0,0 @@
-.addrBar { background: lightgray; padding: 5px; }
diff --git a/src/app/layouts/tabbar/tabbar-sample-3/tabbar-sample-3.component.ts b/src/app/layouts/tabbar/tabbar-sample-3/tabbar-sample-3.component.ts
index 7c511af4f3..63abb84a7a 100644
--- a/src/app/layouts/tabbar/tabbar-sample-3/tabbar-sample-3.component.ts
+++ b/src/app/layouts/tabbar/tabbar-sample-3/tabbar-sample-3.component.ts
@@ -1,4 +1,5 @@
-import { Component } from "@angular/core";
+import { Component, OnInit } from "@angular/core";
+import { Router } from "@angular/router";
 import { ISelectionEventArgs } from "igniteui-angular";
 
 @Component({
@@ -6,28 +7,40 @@ import { ISelectionEventArgs } from "igniteui-angular";
     styleUrls: ["tabbar-sample-3.component.scss"],
     templateUrl: "tabbar-sample-3.component.html"
 })
-export class TabbarSample3Component {
-    public urlLocations = [
-        { label: "View 1", url: "view1" },
-        { label: "View 2", url: "view2" },
-        { label: "View 3", url: "view3" }
-    ];
+export class TabbarSample3Component implements OnInit {
+    public urlLocations = [];
 
-    constructor() { }
+    constructor(private router: Router) { }
 
     public get currentDocumentLocation() {
-        return document.location.href;
+        return document.location.pathname;
     }
 
-    public onDropDownSelection(eventArgs: ISelectionEventArgs) {
+    public ngOnInit() {
+        const availableAddresses = [
+            { label: "/layouts/tabbar-sample-3", url: "/layouts/tabbar-sample-3" },
+            { label: "/layouts/tabbar-sample-3/view1", url: "/layouts/tabbar-sample-3/view1" },
+            { label: "/layouts/tabbar-sample-3/view2", url: "/layouts/tabbar-sample-3/view2" },
+            { label: "/layouts/tabbar-sample-3/view3", url: "/layouts/tabbar-sample-3/view3" }
+        ];
+
         const currentAddress: string = document.location.href;
-        let baseAddress: string;
         if (currentAddress.indexOf("samples") !== -1) {
-            baseAddress = "/samples/layouts/tabbar-sample-3/";
+            availableAddresses.forEach(address => {
+                this.urlLocations.push({
+                    label: "/samples" + address.label,
+                    url: "/samples" + address.url
+                });
+            });
         } else {
-            baseAddress = "/layouts/tabbar-sample-3/";
+            availableAddresses.forEach(address => {
+                this.urlLocations.push(address);
+            });
         }
-        document.location.href = baseAddress + eventArgs.newSelection.value;
+    }
+
+    public handleSelection(eventArgs: ISelectionEventArgs): void {
+        this.router.navigateByUrl(eventArgs.newSelection.value);
     }
 }
 
diff --git a/src/app/layouts/tabs/tabs-sample-6/tabs-sample-6.component.html b/src/app/layouts/tabs/tabs-sample-6/tabs-sample-6.component.html
index dbed622dc5..d0958b386c 100644
--- a/src/app/layouts/tabs/tabs-sample-6/tabs-sample-6.component.html
+++ b/src/app/layouts/tabs/tabs-sample-6/tabs-sample-6.component.html
@@ -1,17 +1,14 @@
-<div class="addrBar">
-    URL: 
-    <button igxButton="flat"
-        [igxToggleAction]="dropdown"
-        [igxDropDownItemNavigation]="dropdown">{{ currentDocumentLocation }}</button>
-</div>
-<igx-drop-down #dropdown [width]="'100px'" (onSelection)="onDropDownSelection($event)">
-    <igx-drop-down-item *ngFor="let aLocation of urlLocations" [value]="aLocation.url">{{ aLocation.label }}</igx-drop-down-item>
-</igx-drop-down>
+<igx-select [value]="currentDocumentLocation" (onSelection)="handleSelection($event)">
+    <label igxLabel>URL</label>
+    <igx-select-item *ngFor="let aLocation of urlLocations" [value]="aLocation.url">
+        {{ aLocation.label }}
+    </igx-select-item>
+</igx-select>
 
 Use the tab items to select different group of buttons.<br>
 
 <igx-tabs>
-    <igx-tab-item label="Push Buttons" icon="dashboard"
+    <igx-tab-item label="Push Buttons" icon="radio_button_unchecked"
         routerLink="view1"
         routerLinkActive #rla1="routerLinkActive"
         [isSelected]="rla1.isActive">
diff --git a/src/app/layouts/tabs/tabs-sample-6/tabs-sample-6.component.scss b/src/app/layouts/tabs/tabs-sample-6/tabs-sample-6.component.scss
index 335fa5454b..e69de29bb2 100644
--- a/src/app/layouts/tabs/tabs-sample-6/tabs-sample-6.component.scss
+++ b/src/app/layouts/tabs/tabs-sample-6/tabs-sample-6.component.scss
@@ -1 +0,0 @@
-.addrBar { background: lightgray; padding: 5px; }
\ No newline at end of file
diff --git a/src/app/layouts/tabs/tabs-sample-6/tabs-sample-6.component.ts b/src/app/layouts/tabs/tabs-sample-6/tabs-sample-6.component.ts
index e6b0aa2678..261c051f52 100644
--- a/src/app/layouts/tabs/tabs-sample-6/tabs-sample-6.component.ts
+++ b/src/app/layouts/tabs/tabs-sample-6/tabs-sample-6.component.ts
@@ -1,4 +1,5 @@
-import { Component } from "@angular/core";
+import { Component, OnInit } from "@angular/core";
+import { Router } from "@angular/router";
 import { ISelectionEventArgs } from "igniteui-angular";
 
 @Component({
@@ -6,28 +7,40 @@ import { ISelectionEventArgs } from "igniteui-angular";
     styleUrls: ["./tabs-sample-6.component.scss"],
     templateUrl: "./tabs-sample-6.component.html"
 })
-export class TabsSample6Component {
-    public urlLocations = [
-        { label: "View 1", url: "view1" },
-        { label: "View 2", url: "view2" },
-        { label: "View 3", url: "view3" }
-    ];
+export class TabsSample6Component implements OnInit {
+    public urlLocations = [];
 
-    constructor() { }
+    constructor(private router: Router) { }
 
     public get currentDocumentLocation() {
-        return document.location.href;
+        return document.location.pathname;
     }
 
-    public onDropDownSelection(eventArgs: ISelectionEventArgs) {
+    public ngOnInit() {
+        const availableAddresses = [
+            { label: "/layouts/tabs-sample-6", url: "/layouts/tabs-sample-6" },
+            { label: "/layouts/tabs-sample-6/view1", url: "/layouts/tabs-sample-6/view1" },
+            { label: "/layouts/tabs-sample-6/view2", url: "/layouts/tabs-sample-6/view2" },
+            { label: "/layouts/tabs-sample-6/view3", url: "/layouts/tabs-sample-6/view3" }
+        ];
+
         const currentAddress: string = document.location.href;
-        let baseAddress: string;
         if (currentAddress.indexOf("samples") !== -1) {
-            baseAddress = "/samples/layouts/tabs-sample-6/";
+            availableAddresses.forEach(address => {
+                this.urlLocations.push({
+                    label: "/samples" + address.label,
+                    url: "/samples" + address.url
+                });
+            });
         } else {
-            baseAddress = "/layouts/tabs-sample-6/";
+            availableAddresses.forEach(address => {
+                this.urlLocations.push(address);
+            });
         }
-        document.location.href = baseAddress + eventArgs.newSelection.value;
+    }
+
+    public handleSelection(eventArgs: ISelectionEventArgs): void {
+        this.router.navigateByUrl(eventArgs.newSelection.value);
     }
 }
 

From d97176e54150b79d12f1b9943e7d229fd627e2fa Mon Sep 17 00:00:00 2001
From: Radko Kolev <radko.kolev@gmail.com>
Date: Thu, 11 Jul 2019 14:01:57 +0300
Subject: [PATCH 06/11] simplifying tabs/bottomNav samples

---
 .../tabbar-sample-3.component.html            |  4 +--
 .../tabbar-sample-3.component.ts              | 27 +++++++------------
 .../tabs-sample-6.component.html              |  4 +--
 .../tabs-sample-6/tabs-sample-6.component.ts  | 27 +++++++------------
 4 files changed, 22 insertions(+), 40 deletions(-)

diff --git a/src/app/layouts/tabbar/tabbar-sample-3/tabbar-sample-3.component.html b/src/app/layouts/tabbar/tabbar-sample-3/tabbar-sample-3.component.html
index 1473b77068..74e3c8ff72 100644
--- a/src/app/layouts/tabbar/tabbar-sample-3/tabbar-sample-3.component.html
+++ b/src/app/layouts/tabbar/tabbar-sample-3/tabbar-sample-3.component.html
@@ -1,7 +1,7 @@
 <igx-select [value]="currentDocumentLocation" (onSelection)="handleSelection($event)">
     <label igxLabel>URL</label>
-    <igx-select-item *ngFor="let aLocation of urlLocations" [value]="aLocation.url">
-        {{ aLocation.label }}
+    <igx-select-item *ngFor="let aLocation of urlLocations" [value]="aLocation">
+        {{ aLocation }}
     </igx-select-item>
 </igx-select>
 
diff --git a/src/app/layouts/tabbar/tabbar-sample-3/tabbar-sample-3.component.ts b/src/app/layouts/tabbar/tabbar-sample-3/tabbar-sample-3.component.ts
index 63abb84a7a..ab4b778ed9 100644
--- a/src/app/layouts/tabbar/tabbar-sample-3/tabbar-sample-3.component.ts
+++ b/src/app/layouts/tabbar/tabbar-sample-3/tabbar-sample-3.component.ts
@@ -8,7 +8,12 @@ import { ISelectionEventArgs } from "igniteui-angular";
     templateUrl: "tabbar-sample-3.component.html"
 })
 export class TabbarSample3Component implements OnInit {
-    public urlLocations = [];
+    public urlLocations = [
+        "/layouts/tabbar-sample-3",
+        "/layouts/tabbar-sample-3/view1",
+        "/layouts/tabbar-sample-3/view2",
+        "/layouts/tabbar-sample-3/view3"
+    ];
 
     constructor(private router: Router) { }
 
@@ -17,25 +22,11 @@ export class TabbarSample3Component implements OnInit {
     }
 
     public ngOnInit() {
-        const availableAddresses = [
-            { label: "/layouts/tabbar-sample-3", url: "/layouts/tabbar-sample-3" },
-            { label: "/layouts/tabbar-sample-3/view1", url: "/layouts/tabbar-sample-3/view1" },
-            { label: "/layouts/tabbar-sample-3/view2", url: "/layouts/tabbar-sample-3/view2" },
-            { label: "/layouts/tabbar-sample-3/view3", url: "/layouts/tabbar-sample-3/view3" }
-        ];
-
         const currentAddress: string = document.location.href;
         if (currentAddress.indexOf("samples") !== -1) {
-            availableAddresses.forEach(address => {
-                this.urlLocations.push({
-                    label: "/samples" + address.label,
-                    url: "/samples" + address.url
-                });
-            });
-        } else {
-            availableAddresses.forEach(address => {
-                this.urlLocations.push(address);
-            });
+            for (let i = 0; i < this.urlLocations.length; i++) {
+                this.urlLocations[i] = "/samples" + this.urlLocations[i];
+            }
         }
     }
 
diff --git a/src/app/layouts/tabs/tabs-sample-6/tabs-sample-6.component.html b/src/app/layouts/tabs/tabs-sample-6/tabs-sample-6.component.html
index d0958b386c..007a3c904c 100644
--- a/src/app/layouts/tabs/tabs-sample-6/tabs-sample-6.component.html
+++ b/src/app/layouts/tabs/tabs-sample-6/tabs-sample-6.component.html
@@ -1,7 +1,7 @@
 <igx-select [value]="currentDocumentLocation" (onSelection)="handleSelection($event)">
     <label igxLabel>URL</label>
-    <igx-select-item *ngFor="let aLocation of urlLocations" [value]="aLocation.url">
-        {{ aLocation.label }}
+    <igx-select-item *ngFor="let aLocation of urlLocations" [value]="aLocation">
+        {{ aLocation }}
     </igx-select-item>
 </igx-select>
 
diff --git a/src/app/layouts/tabs/tabs-sample-6/tabs-sample-6.component.ts b/src/app/layouts/tabs/tabs-sample-6/tabs-sample-6.component.ts
index 261c051f52..713cffc5ae 100644
--- a/src/app/layouts/tabs/tabs-sample-6/tabs-sample-6.component.ts
+++ b/src/app/layouts/tabs/tabs-sample-6/tabs-sample-6.component.ts
@@ -8,7 +8,12 @@ import { ISelectionEventArgs } from "igniteui-angular";
     templateUrl: "./tabs-sample-6.component.html"
 })
 export class TabsSample6Component implements OnInit {
-    public urlLocations = [];
+    public urlLocations = [
+        "/layouts/tabs-sample-6",
+        "/layouts/tabs-sample-6/view1",
+        "/layouts/tabs-sample-6/view2",
+        "/layouts/tabs-sample-6/view3"
+    ];
 
     constructor(private router: Router) { }
 
@@ -17,25 +22,11 @@ export class TabsSample6Component implements OnInit {
     }
 
     public ngOnInit() {
-        const availableAddresses = [
-            { label: "/layouts/tabs-sample-6", url: "/layouts/tabs-sample-6" },
-            { label: "/layouts/tabs-sample-6/view1", url: "/layouts/tabs-sample-6/view1" },
-            { label: "/layouts/tabs-sample-6/view2", url: "/layouts/tabs-sample-6/view2" },
-            { label: "/layouts/tabs-sample-6/view3", url: "/layouts/tabs-sample-6/view3" }
-        ];
-
         const currentAddress: string = document.location.href;
         if (currentAddress.indexOf("samples") !== -1) {
-            availableAddresses.forEach(address => {
-                this.urlLocations.push({
-                    label: "/samples" + address.label,
-                    url: "/samples" + address.url
-                });
-            });
-        } else {
-            availableAddresses.forEach(address => {
-                this.urlLocations.push(address);
-            });
+            for (let i = 0; i < this.urlLocations.length; i++) {
+                this.urlLocations[i] = "/samples" + this.urlLocations[i];
+            }
         }
     }
 

From 3426582386a621e0c32c4999e729fbf71da570b4 Mon Sep 17 00:00:00 2001
From: Radko Kolev <radko.kolev@gmail.com>
Date: Fri, 12 Jul 2019 16:56:33 +0300
Subject: [PATCH 07/11] replacing samples' data source

---
 src/app/layouts/layouts-routing.module.ts     | 12 +--
 .../tabbar-sample-3.component.html            | 14 ++--
 .../tabbar-sample-3.component.ts              | 73 ++++++++++---------
 .../tabs-sample-6.component.html              | 14 ++--
 .../tabs-sample-6/tabs-sample-6.component.ts  | 73 ++++++++++---------
 5 files changed, 92 insertions(+), 94 deletions(-)

diff --git a/src/app/layouts/layouts-routing.module.ts b/src/app/layouts/layouts-routing.module.ts
index 69cccf678a..96922a5b84 100644
--- a/src/app/layouts/layouts-routing.module.ts
+++ b/src/app/layouts/layouts-routing.module.ts
@@ -169,9 +169,9 @@ export const layoutsRoutes: Routes = [
     },
     {
         children: [
-            { path: "view1", component: BottomNavRoutingView1Component },
-            { path: "view2", component: BottomNavRoutingView2Component },
-            { path: "view3", component: BottomNavRoutingView3Component }
+            { path: "arrivals",   component: BottomNavRoutingView1Component },
+            { path: "departures", component: BottomNavRoutingView2Component },
+            { path: "canceled",   component: BottomNavRoutingView3Component }
         ],
         component: TabbarSample3Component,
         data: layoutsRoutesData["tabbar-sample-3"],
@@ -202,9 +202,9 @@ export const layoutsRoutes: Routes = [
     },
     {
         children: [
-            { path: "view1", component: TabsRoutingView1Component },
-            { path: "view2", component: TabsRoutingView2Component },
-            { path: "view3", component: TabsRoutingView3Component }
+            { path: "arrivals",   component: TabsRoutingView1Component },
+            { path: "departures", component: TabsRoutingView2Component },
+            { path: "canceled",   component: TabsRoutingView3Component }
         ],
         component: TabsSample6Component,
         data: layoutsRoutesData["tabs-sample-6"],
diff --git a/src/app/layouts/tabbar/tabbar-sample-3/tabbar-sample-3.component.html b/src/app/layouts/tabbar/tabbar-sample-3/tabbar-sample-3.component.html
index 74e3c8ff72..d7cdc10e8a 100644
--- a/src/app/layouts/tabbar/tabbar-sample-3/tabbar-sample-3.component.html
+++ b/src/app/layouts/tabbar/tabbar-sample-3/tabbar-sample-3.component.html
@@ -5,25 +5,23 @@
     </igx-select-item>
 </igx-select>
 
-Use the tab items to select different group of buttons.<br>
-
 <router-outlet></router-outlet>
 
 <igx-bottom-nav>
-    <igx-tab label="Push Buttons" icon="radio_button_unchecked"
-        routerLink="view1"
+    <igx-tab label="Arrivals" icon="flight_land"
+        routerLink="arrivals"
         routerLinkActive #rla1="routerLinkActive"
         [isSelected]="rla1.isActive">
     </igx-tab>
 
-    <igx-tab label="Checkbox Buttons" icon="check_circle_outline"
-        routerLink="view2"
+    <igx-tab label="Departures" icon="flight_takeoff"
+        routerLink="departures"
         routerLinkActive #rla2="routerLinkActive"
         [isSelected]="rla2.isActive">
     </igx-tab>
 
-    <igx-tab label="Radio Buttons" icon="radio_button_checked"
-        routerLink="view3"
+    <igx-tab label="Canceled" icon="cancel"
+        routerLink="canceled"
         routerLinkActive #rla3="routerLinkActive"
         [isSelected]="rla3.isActive">
     </igx-tab>
diff --git a/src/app/layouts/tabbar/tabbar-sample-3/tabbar-sample-3.component.ts b/src/app/layouts/tabbar/tabbar-sample-3/tabbar-sample-3.component.ts
index ab4b778ed9..bf7f32c9dc 100644
--- a/src/app/layouts/tabbar/tabbar-sample-3/tabbar-sample-3.component.ts
+++ b/src/app/layouts/tabbar/tabbar-sample-3/tabbar-sample-3.component.ts
@@ -10,9 +10,9 @@ import { ISelectionEventArgs } from "igniteui-angular";
 export class TabbarSample3Component implements OnInit {
     public urlLocations = [
         "/layouts/tabbar-sample-3",
-        "/layouts/tabbar-sample-3/view1",
-        "/layouts/tabbar-sample-3/view2",
-        "/layouts/tabbar-sample-3/view3"
+        "/layouts/tabbar-sample-3/arrivals",
+        "/layouts/tabbar-sample-3/departures",
+        "/layouts/tabbar-sample-3/canceled"
     ];
 
     constructor(private router: Router) { }
@@ -36,55 +36,56 @@ export class TabbarSample3Component implements OnInit {
 }
 
 @Component({
-    styles: [
-        ":host { display: flex; flex-flow: column nowrap; padding: 10px; }"
-    ],
     template: `
-        Push Buttons
-        <div style="display: flex; justify-content: space-around; align-items: center; ">
-            <button igxButton="flat" igxRipple>Flat</button> <br>
-            <button igxButton="raised" igxRipple>Raised</button> <br>
-            <button igxButton="outlined" igxRipple>Outlined</button> <br>
-            <button igxButton="icon" igxRipple>
-                <igx-icon fontSet="material">favorite</igx-icon>
-            </button> <br>
-            <button igxButton="fab" igxRipple>
-                <igx-icon fontSet="material">favorite</igx-icon>
-            </button>
-        </div>
+        <br>
+        <igx-grid [data]="data" [autoGenerate]="true" height="400px" width="700px"></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"},
+        { Flight: "W64302", From: "London Luton", Time: "13:10", Status: "Expected"},
+        { Flight: "BA890", From: "London Heathrow", Time: "13:15", Status: "Expected"},
+        { Flight: "LH1426", From: "Frankfurt", Time: "13:45", Status: "Expected"},
+        { Flight: "AC9487", From: "Frankfurt", Time: "13:45", Status: "Expected"},
+        { Flight: "TP7540", From: "Frankfurt", Time: "13:45", Status: "Expected"}
+    ];
 }
 
 @Component({
-    styles: [
-        ":host { display: flex; flex-flow: column nowrap; padding: 10px; }",
-        "igx-checkbox { margin-top: 16px; }"
-    ],
     template: `
-        Checkbox Buttons
-        <igx-checkbox [checked]="true">Research</igx-checkbox>
-        <igx-checkbox [checked]="true">Design</igx-checkbox>
-        <igx-checkbox [checked]="false">Implement</igx-checkbox>
-        <igx-checkbox [checked]="false">Test</igx-checkbox>
-        <igx-checkbox [checked]="false">Integrate</igx-checkbox>
+        <br>
+        <igx-grid [data]="data" [autoGenerate]="true" height="400px" width="700px"></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"},
+        { Flight: "LH1703", From: "Munich", Time: "13:10", Status: "Check-in"},
+        { Flight: "AC9524", From: "Munich", Time: "13:10", Status: "Check-in"},
+        { Flight: "LX3817", From: "Munich", Time: "13:10", Status: "Check-in"}
+    ];
 }
 
 @Component({
-    styles: [
-        ":host { display: flex; flex-flow: column nowrap; padding: 10px; }",
-        "igx-radio { margin-top: 16px; }"
-    ],
     template: `
-        Radio Buttons
-        <igx-radio *ngFor="let food of foods" [(ngModel)]="selectedFood" value="{{ food }}">{{ food }}</igx-radio>
+        <br>
+        <igx-grid [data]="data" [autoGenerate]="true" height="400px" width="700px"></igx-grid>
     `
 })
 export class BottomNavRoutingView3Component {
-    public foods = ["Apple", "Apricot", "Banana", "Nectarine", "Orange"];
-    public selectedFood: string = this.foods[2];
+    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"}
+    ];
 }
diff --git a/src/app/layouts/tabs/tabs-sample-6/tabs-sample-6.component.html b/src/app/layouts/tabs/tabs-sample-6/tabs-sample-6.component.html
index 007a3c904c..771244930a 100644
--- a/src/app/layouts/tabs/tabs-sample-6/tabs-sample-6.component.html
+++ b/src/app/layouts/tabs/tabs-sample-6/tabs-sample-6.component.html
@@ -5,23 +5,21 @@
     </igx-select-item>
 </igx-select>
 
-Use the tab items to select different group of buttons.<br>
-
 <igx-tabs>
-    <igx-tab-item label="Push Buttons" icon="radio_button_unchecked"
-        routerLink="view1"
+    <igx-tab-item label="Arrivals" icon="flight_land"
+        routerLink="arrivals"
         routerLinkActive #rla1="routerLinkActive"
         [isSelected]="rla1.isActive">
     </igx-tab-item>
     
-    <igx-tab-item label="Checkbox Buttons" icon="check_circle_outline"
-        routerLink="view2"
+    <igx-tab-item label="Departures" icon="flight_takeoff"
+        routerLink="departures"
         routerLinkActive #rla2="routerLinkActive"
         [isSelected]="rla2.isActive">
     </igx-tab-item>
 
-    <igx-tab-item label="Radio Buttons" icon="radio_button_checked"
-        routerLink="view3"
+    <igx-tab-item label="Canceled" icon="cancel"
+        routerLink="canceled"
         routerLinkActive #rla3="routerLinkActive"
         [isSelected]="rla3.isActive">
     </igx-tab-item>
diff --git a/src/app/layouts/tabs/tabs-sample-6/tabs-sample-6.component.ts b/src/app/layouts/tabs/tabs-sample-6/tabs-sample-6.component.ts
index 713cffc5ae..5ebeb5a15c 100644
--- a/src/app/layouts/tabs/tabs-sample-6/tabs-sample-6.component.ts
+++ b/src/app/layouts/tabs/tabs-sample-6/tabs-sample-6.component.ts
@@ -10,9 +10,9 @@ import { ISelectionEventArgs } from "igniteui-angular";
 export class TabsSample6Component implements OnInit {
     public urlLocations = [
         "/layouts/tabs-sample-6",
-        "/layouts/tabs-sample-6/view1",
-        "/layouts/tabs-sample-6/view2",
-        "/layouts/tabs-sample-6/view3"
+        "/layouts/tabs-sample-6/arrivals",
+        "/layouts/tabs-sample-6/departures",
+        "/layouts/tabs-sample-6/canceled"
     ];
 
     constructor(private router: Router) { }
@@ -36,55 +36,56 @@ export class TabsSample6Component implements OnInit {
 }
 
 @Component({
-    styles: [
-        ":host { display: flex; flex-flow: column nowrap; padding: 10px; }"
-    ],
     template: `
-        Push Buttons
-        <div style="display: flex; justify-content: space-around; align-items: center; ">
-            <button igxButton="flat" igxRipple>Flat</button> <br>
-            <button igxButton="raised" igxRipple>Raised</button> <br>
-            <button igxButton="outlined" igxRipple>Outlined</button> <br>
-            <button igxButton="icon" igxRipple>
-                <igx-icon fontSet="material">favorite</igx-icon>
-            </button> <br>
-            <button igxButton="fab" igxRipple>
-                <igx-icon fontSet="material">favorite</igx-icon>
-            </button>
-        </div>
+        <br>
+        <igx-grid [data]="data" [autoGenerate]="true" height="400px" width="700px"></igx-grid>
     `
 })
 export class TabsRoutingView1Component {
+    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"},
+        { Flight: "W64302", From: "London Luton", Time: "13:10", Status: "Expected"},
+        { Flight: "BA890", From: "London Heathrow", Time: "13:15", Status: "Expected"},
+        { Flight: "LH1426", From: "Frankfurt", Time: "13:45", Status: "Expected"},
+        { Flight: "AC9487", From: "Frankfurt", Time: "13:45", Status: "Expected"},
+        { Flight: "TP7540", From: "Frankfurt", Time: "13:45", Status: "Expected"}
+    ];
 }
 
 @Component({
-    styles: [
-        ":host { display: flex; flex-flow: column nowrap; padding: 10px; }",
-        "igx-checkbox { margin-top: 16px; }"
-    ],
     template: `
-        Checkbox Buttons
-        <igx-checkbox [checked]="true">Research</igx-checkbox>
-        <igx-checkbox [checked]="true">Design</igx-checkbox>
-        <igx-checkbox [checked]="false">Implement</igx-checkbox>
-        <igx-checkbox [checked]="false">Test</igx-checkbox>
-        <igx-checkbox [checked]="false">Integrate</igx-checkbox>
+        <br>
+        <igx-grid [data]="data" [autoGenerate]="true" height="400px" width="700px"></igx-grid>
     `
 })
 export class TabsRoutingView2Component {
+    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"},
+        { Flight: "LH1703", From: "Munich", Time: "13:10", Status: "Check-in"},
+        { Flight: "AC9524", From: "Munich", Time: "13:10", Status: "Check-in"},
+        { Flight: "LX3817", From: "Munich", Time: "13:10", Status: "Check-in"}
+    ];
 }
 
 @Component({
-    styles: [
-        ":host { display: flex; flex-flow: column nowrap; padding: 10px; }",
-        "igx-radio { margin-top: 16px; }"
-    ],
     template: `
-        Radio Buttons
-        <igx-radio *ngFor="let food of foods" [(ngModel)]="selectedFood" value="{{ food }}">{{ food }}</igx-radio>
+        <br>
+        <igx-grid [data]="data" [autoGenerate]="true" height="400px" width="700px"></igx-grid>
     `
 })
 export class TabsRoutingView3Component {
-    public foods = ["Apple", "Apricot", "Banana", "Nectarine", "Orange"];
-    public selectedFood: string = this.foods[2];
+    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"}
+    ];
 }

From 11fc19f84eb2bea8a0a85ad04b18df2ee256f268 Mon Sep 17 00:00:00 2001
From: Radko Kolev <radko.kolev@gmail.com>
Date: Mon, 15 Jul 2019 14:37:21 +0300
Subject: [PATCH 08/11] updating required modules list

---
 live-editing/configs/TabBarConfigGenerator.ts | 14 ++++----------
 live-editing/configs/TabsConfigGenerator.ts   | 14 ++++----------
 2 files changed, 8 insertions(+), 20 deletions(-)

diff --git a/live-editing/configs/TabBarConfigGenerator.ts b/live-editing/configs/TabBarConfigGenerator.ts
index be8c73879a..740bf3fcf8 100644
--- a/live-editing/configs/TabBarConfigGenerator.ts
+++ b/live-editing/configs/TabBarConfigGenerator.ts
@@ -1,7 +1,7 @@
 /* tslint:disable:object-literal-sort-keys */
 import { Router, RouterModule, Routes } from "@angular/router";
-import { IgxAvatarModule, IgxBottomNavModule, IgxButtonModule, IgxCheckboxModule, IgxDropDownModule,
-    IgxIconModule, IgxListModule, IgxRadioModule, IgxRippleModule, IgxToggleModule } from "igniteui-angular";
+import { IgxAvatarModule, IgxBottomNavModule, IgxButtonModule, 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 { TabbarSample3Component } from "../../src/app/layouts/tabbar/tabbar-sample-3/tabbar-sample-3.component";
@@ -59,15 +59,9 @@ export class TabBarConfigGenerator implements IConfigGenerator {
         configs.push(new Config({
             component: TabbarSample3Component,
             appModuleConfig: new AppModuleConfig({
-                imports: [
-                    RouterModule, TabbarSample3Component, IgxBottomNavModule, IgxButtonModule, IgxCheckboxModule,
-                    IgxDropDownModule, IgxIconModule, IgxRadioModule, IgxRippleModule, IgxToggleModule
-                ],
+                imports: [ RouterModule, TabbarSample3Component, IgxBottomNavModule, IgxSelectModule ],
                 ngDeclarations: [TabbarSample3Component],
-                ngImports: [
-                    RouterModule, IgxBottomNavModule, IgxButtonModule, IgxCheckboxModule, IgxDropDownModule,
-                    IgxIconModule, IgxRadioModule, IgxRippleModule, IgxToggleModule
-                ]
+                ngImports: [ RouterModule, IgxBottomNavModule, IgxSelectModule ]
             }),
             shortenComponentPathBy: "/layouts/tabbar/"
         }));
diff --git a/live-editing/configs/TabsConfigGenerator.ts b/live-editing/configs/TabsConfigGenerator.ts
index 2d03b18230..35d9fd1f9c 100644
--- a/live-editing/configs/TabsConfigGenerator.ts
+++ b/live-editing/configs/TabsConfigGenerator.ts
@@ -3,8 +3,8 @@
 import { RouterModule } from "@angular/router";
 
 import {
-    IgxAvatarModule, IgxButtonModule, IgxCardModule, IgxCheckboxModule, IgxDropDownModule, IgxIconModule,
-    IgxNavbarModule, IgxRadioModule, IgxRippleModule, IgxTabsModule, IgxToggleModule
+    IgxAvatarModule, IgxButtonModule, IgxCardModule, IgxIconModule, IgxNavbarModule, IgxRippleModule,
+    IgxSelectModule, IgxTabsModule, IgxToggleModule
 } from "igniteui-angular";
 
 import { TabsSample1Component } from "../../src/app/layouts/tabs/tabs-sample-1/tabs-sample-1.component";
@@ -109,15 +109,9 @@ export class TabsConfigGenerator implements IConfigGenerator {
         configs.push(new Config({
             component: TabsSample6Component,
             appModuleConfig: new AppModuleConfig({
-                imports: [
-                    RouterModule, TabsSample6Component, IgxButtonModule, IgxCheckboxModule, IgxDropDownModule,
-                    IgxIconModule, IgxRadioModule, IgxRippleModule, IgxTabsModule, IgxToggleModule
-                ],
+                imports: [ RouterModule, TabsSample6Component, IgxSelectModule, IgxTabsModule ],
                 ngDeclarations: [TabsSample6Component],
-                ngImports: [
-                    RouterModule, IgxButtonModule, IgxCheckboxModule, IgxDropDownModule, IgxRadioModule,
-                    IgxIconModule, IgxRippleModule, IgxTabsModule, IgxToggleModule
-                ]
+                ngImports: [ RouterModule, IgxSelectModule, IgxTabsModule ]
             }),
             shortenComponentPathBy: "/layouts/tabs/"
         }));

From d29d1967b07b86d45b803520e35e7a58e37646fa Mon Sep 17 00:00:00 2001
From: Radko Kolev <radko.kolev@gmail.com>
Date: Tue, 16 Jul 2019 10:44:22 +0300
Subject: [PATCH 09/11] changing sizes of the igxGrid used in the samples

---
 .../tabbar-sample-3.component.ts              | 33 +++++++++++--------
 .../tabs-sample-6/tabs-sample-6.component.ts  | 33 +++++++++++--------
 2 files changed, 40 insertions(+), 26 deletions(-)

diff --git a/src/app/layouts/tabbar/tabbar-sample-3/tabbar-sample-3.component.ts b/src/app/layouts/tabbar/tabbar-sample-3/tabbar-sample-3.component.ts
index bf7f32c9dc..bc5c6546fd 100644
--- a/src/app/layouts/tabbar/tabbar-sample-3/tabbar-sample-3.component.ts
+++ b/src/app/layouts/tabbar/tabbar-sample-3/tabbar-sample-3.component.ts
@@ -38,7 +38,12 @@ export class TabbarSample3Component implements OnInit {
 @Component({
     template: `
         <br>
-        <igx-grid [data]="data" [autoGenerate]="true" height="400px" width="700px"></igx-grid>
+        <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 {
@@ -47,19 +52,19 @@ export class BottomNavRoutingView1Component {
         { 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"},
-        { Flight: "W64302", From: "London Luton", Time: "13:10", Status: "Expected"},
-        { Flight: "BA890", From: "London Heathrow", Time: "13:15", Status: "Expected"},
-        { Flight: "LH1426", From: "Frankfurt", Time: "13:45", Status: "Expected"},
-        { Flight: "AC9487", From: "Frankfurt", Time: "13:45", Status: "Expected"},
-        { Flight: "TP7540", From: "Frankfurt", Time: "13:45", Status: "Expected"}
+        { Flight: "UA9832", From: "Vienna", Time: "12:45", Status: "Expected"}
     ];
 }
 
 @Component({
     template: `
         <br>
-        <igx-grid [data]="data" [autoGenerate]="true" height="400px" width="700px"></igx-grid>
+        <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 {
@@ -69,17 +74,19 @@ export class BottomNavRoutingView2Component {
         { 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"},
-        { Flight: "LH1703", From: "Munich", Time: "13:10", Status: "Check-in"},
-        { Flight: "AC9524", From: "Munich", Time: "13:10", Status: "Check-in"},
-        { Flight: "LX3817", From: "Munich", Time: "13:10", Status: "Check-in"}
+        { Flight: "QR228", From: "Doha", Time: "13:00", Status: "Check-in"}
     ];
 }
 
 @Component({
     template: `
         <br>
-        <igx-grid [data]="data" [autoGenerate]="true" height="400px" width="700px"></igx-grid>
+        <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 {
diff --git a/src/app/layouts/tabs/tabs-sample-6/tabs-sample-6.component.ts b/src/app/layouts/tabs/tabs-sample-6/tabs-sample-6.component.ts
index 5ebeb5a15c..84fa42db3d 100644
--- a/src/app/layouts/tabs/tabs-sample-6/tabs-sample-6.component.ts
+++ b/src/app/layouts/tabs/tabs-sample-6/tabs-sample-6.component.ts
@@ -38,7 +38,12 @@ export class TabsSample6Component implements OnInit {
 @Component({
     template: `
         <br>
-        <igx-grid [data]="data" [autoGenerate]="true" height="400px" width="700px"></igx-grid>
+        <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 TabsRoutingView1Component {
@@ -47,19 +52,19 @@ export class TabsRoutingView1Component {
         { 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"},
-        { Flight: "W64302", From: "London Luton", Time: "13:10", Status: "Expected"},
-        { Flight: "BA890", From: "London Heathrow", Time: "13:15", Status: "Expected"},
-        { Flight: "LH1426", From: "Frankfurt", Time: "13:45", Status: "Expected"},
-        { Flight: "AC9487", From: "Frankfurt", Time: "13:45", Status: "Expected"},
-        { Flight: "TP7540", From: "Frankfurt", Time: "13:45", Status: "Expected"}
+        { Flight: "UA9832", From: "Vienna", Time: "12:45", Status: "Expected"}
     ];
 }
 
 @Component({
     template: `
         <br>
-        <igx-grid [data]="data" [autoGenerate]="true" height="400px" width="700px"></igx-grid>
+        <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 TabsRoutingView2Component {
@@ -69,17 +74,19 @@ export class TabsRoutingView2Component {
         { 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"},
-        { Flight: "LH1703", From: "Munich", Time: "13:10", Status: "Check-in"},
-        { Flight: "AC9524", From: "Munich", Time: "13:10", Status: "Check-in"},
-        { Flight: "LX3817", From: "Munich", Time: "13:10", Status: "Check-in"}
+        { Flight: "QR228", From: "Doha", Time: "13:00", Status: "Check-in"}
     ];
 }
 
 @Component({
     template: `
         <br>
-        <igx-grid [data]="data" [autoGenerate]="true" height="400px" width="700px"></igx-grid>
+        <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 TabsRoutingView3Component {

From 32c07efa7d400693363655b53ab09cfb9f5ee36b Mon Sep 17 00:00:00 2001
From: Radko Kolev <radko.kolev@gmail.com>
Date: Tue, 16 Jul 2019 16:45:11 +0300
Subject: [PATCH 10/11] fixing tabs/bottomNav config generators

---
 live-editing/configs/TabBarConfigGenerator.ts | 32 +++++++++++++++----
 live-editing/configs/TabsConfigGenerator.ts   | 31 ++++++++++++++----
 .../tabbar-sample-3.component.ts              | 17 ++++++----
 .../tabs-sample-6/tabs-sample-6.component.ts  | 17 ++++++----
 4 files changed, 73 insertions(+), 24 deletions(-)

diff --git a/live-editing/configs/TabBarConfigGenerator.ts b/live-editing/configs/TabBarConfigGenerator.ts
index 740bf3fcf8..d6220c765a 100644
--- a/live-editing/configs/TabBarConfigGenerator.ts
+++ b/live-editing/configs/TabBarConfigGenerator.ts
@@ -1,10 +1,14 @@
 /* tslint:disable:object-literal-sort-keys */
 import { Router, RouterModule, Routes } from "@angular/router";
-import { IgxAvatarModule, IgxBottomNavModule, IgxButtonModule, IgxIconModule, IgxListModule, IgxRippleModule,
-    IgxSelectModule } 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 { TabbarSample3Component } from "../../src/app/layouts/tabbar/tabbar-sample-3/tabbar-sample-3.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";
@@ -59,9 +63,25 @@ export class TabBarConfigGenerator implements IConfigGenerator {
         configs.push(new Config({
             component: TabbarSample3Component,
             appModuleConfig: new AppModuleConfig({
-                imports: [ RouterModule, TabbarSample3Component, IgxBottomNavModule, IgxSelectModule ],
-                ngDeclarations: [TabbarSample3Component],
-                ngImports: [ RouterModule, IgxBottomNavModule, IgxSelectModule ]
+                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/"
         }));
diff --git a/live-editing/configs/TabsConfigGenerator.ts b/live-editing/configs/TabsConfigGenerator.ts
index 35d9fd1f9c..e2b28dea04 100644
--- a/live-editing/configs/TabsConfigGenerator.ts
+++ b/live-editing/configs/TabsConfigGenerator.ts
@@ -1,9 +1,9 @@
 /* tslint:disable:object-literal-sort-keys */
 
-import { RouterModule } from "@angular/router";
+import { Router, RouterModule } from "@angular/router";
 
 import {
-    IgxAvatarModule, IgxButtonModule, IgxCardModule, IgxIconModule, IgxNavbarModule, IgxRippleModule,
+    IgxAvatarModule, IgxButtonModule, IgxCardModule, IgxGridModule, IgxIconModule, IgxNavbarModule, IgxRippleModule,
     IgxSelectModule, IgxTabsModule, IgxToggleModule
 } from "igniteui-angular";
 
@@ -18,7 +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 { TabsSample6Component } from "../../src/app/layouts/tabs/tabs-sample-6/tabs-sample-6.component";
+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";
@@ -109,9 +113,24 @@ export class TabsConfigGenerator implements IConfigGenerator {
         configs.push(new Config({
             component: TabsSample6Component,
             appModuleConfig: new AppModuleConfig({
-                imports: [ RouterModule, TabsSample6Component, IgxSelectModule, IgxTabsModule ],
-                ngDeclarations: [TabsSample6Component],
-                ngImports: [ RouterModule, IgxSelectModule, IgxTabsModule ]
+                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/"
         }));
diff --git a/src/app/layouts/tabbar/tabbar-sample-3/tabbar-sample-3.component.ts b/src/app/layouts/tabbar/tabbar-sample-3/tabbar-sample-3.component.ts
index bc5c6546fd..05b98704e0 100644
--- a/src/app/layouts/tabbar/tabbar-sample-3/tabbar-sample-3.component.ts
+++ b/src/app/layouts/tabbar/tabbar-sample-3/tabbar-sample-3.component.ts
@@ -9,10 +9,10 @@ import { ISelectionEventArgs } from "igniteui-angular";
 })
 export class TabbarSample3Component implements OnInit {
     public urlLocations = [
-        "/layouts/tabbar-sample-3",
-        "/layouts/tabbar-sample-3/arrivals",
-        "/layouts/tabbar-sample-3/departures",
-        "/layouts/tabbar-sample-3/canceled"
+        "/",
+        "/arrivals",
+        "/departures",
+        "/canceled"
     ];
 
     constructor(private router: Router) { }
@@ -23,9 +23,14 @@ export class TabbarSample3Component implements OnInit {
 
     public ngOnInit() {
         const currentAddress: string = document.location.href;
-        if (currentAddress.indexOf("samples") !== -1) {
+        if (currentAddress.indexOf("/samples/layouts") !== -1) {
             for (let i = 0; i < this.urlLocations.length; i++) {
-                this.urlLocations[i] = "/samples" + this.urlLocations[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];
             }
         }
     }
diff --git a/src/app/layouts/tabs/tabs-sample-6/tabs-sample-6.component.ts b/src/app/layouts/tabs/tabs-sample-6/tabs-sample-6.component.ts
index 84fa42db3d..bab558c28f 100644
--- a/src/app/layouts/tabs/tabs-sample-6/tabs-sample-6.component.ts
+++ b/src/app/layouts/tabs/tabs-sample-6/tabs-sample-6.component.ts
@@ -9,10 +9,10 @@ import { ISelectionEventArgs } from "igniteui-angular";
 })
 export class TabsSample6Component implements OnInit {
     public urlLocations = [
-        "/layouts/tabs-sample-6",
-        "/layouts/tabs-sample-6/arrivals",
-        "/layouts/tabs-sample-6/departures",
-        "/layouts/tabs-sample-6/canceled"
+        "/",
+        "/arrivals",
+        "/departures",
+        "/canceled"
     ];
 
     constructor(private router: Router) { }
@@ -23,9 +23,14 @@ export class TabsSample6Component implements OnInit {
 
     public ngOnInit() {
         const currentAddress: string = document.location.href;
-        if (currentAddress.indexOf("samples") !== -1) {
+        if (currentAddress.indexOf("/samples/layouts") !== -1) {
             for (let i = 0; i < this.urlLocations.length; i++) {
-                this.urlLocations[i] = "/samples" + this.urlLocations[i];
+                this.urlLocations[i] = "/samples/layouts/tabs-sample-6" + this.urlLocations[i];
+            }
+        } else
+        if (currentAddress.indexOf("/layouts") !== -1) {
+            for (let i = 0; i < this.urlLocations.length; i++) {
+                this.urlLocations[i] = "/layouts/tabs-sample-6" + this.urlLocations[i];
             }
         }
     }

From b2b8232d2b5b1c4985f772f9c812b191ae5859bf Mon Sep 17 00:00:00 2001
From: Radko Kolev <radko.kolev@gmail.com>
Date: Wed, 17 Jul 2019 10:21:21 +0300
Subject: [PATCH 11/11] fixing routing paths

---
 .../layouts/tabbar/tabbar-sample-3/tabbar-sample-3.component.ts | 2 +-
 src/app/layouts/tabs/tabs-sample-6/tabs-sample-6.component.ts   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app/layouts/tabbar/tabbar-sample-3/tabbar-sample-3.component.ts b/src/app/layouts/tabbar/tabbar-sample-3/tabbar-sample-3.component.ts
index 05b98704e0..3c57f34272 100644
--- a/src/app/layouts/tabbar/tabbar-sample-3/tabbar-sample-3.component.ts
+++ b/src/app/layouts/tabbar/tabbar-sample-3/tabbar-sample-3.component.ts
@@ -9,7 +9,7 @@ import { ISelectionEventArgs } from "igniteui-angular";
 })
 export class TabbarSample3Component implements OnInit {
     public urlLocations = [
-        "/",
+        "",
         "/arrivals",
         "/departures",
         "/canceled"
diff --git a/src/app/layouts/tabs/tabs-sample-6/tabs-sample-6.component.ts b/src/app/layouts/tabs/tabs-sample-6/tabs-sample-6.component.ts
index bab558c28f..9dc7a825d9 100644
--- a/src/app/layouts/tabs/tabs-sample-6/tabs-sample-6.component.ts
+++ b/src/app/layouts/tabs/tabs-sample-6/tabs-sample-6.component.ts
@@ -9,7 +9,7 @@ import { ISelectionEventArgs } from "igniteui-angular";
 })
 export class TabsSample6Component implements OnInit {
     public urlLocations = [
-        "/",
+        "",
         "/arrivals",
         "/departures",
         "/canceled"