feat(ui-features): complete the tabs

src/app/pages/ui-features/tabs/tabs.component.html

@@ -1,6 +1,6 @@
 <div class="row">
   <div class="col-md-6">
-    <nga-card>
+    <nga-card size="medium">
       <nga-card-header>Tabset</nga-card-header>
       <nga-card-body>
         <nga-tabset>
@@ -18,9 +18,11 @@
     </nga-card>
   </div>
   <div class="col-md-6">
-    <nga-card>
+    <nga-card size="medium">
       <nga-card-header>Route Tabset</nga-card-header>
-      <nga-card-body></nga-card-body>
+      <nga-card-body>
+        <nga-route-tabset [tabs]="tabs"></nga-route-tabset>
+      </nga-card-body>
     </nga-card>
   </div>
 </div>

src/app/pages/ui-features/tabs/tabs.component.ts

@@ -1,9 +1,37 @@
 import { Component } from '@angular/core';
 
+@Component({
+  selector: 'ngx-tab1',
+  template: `
+    <p>Tab 1 works!</p>
+  `,
+})
+export class Tab1Component { }
+
+@Component({
+  selector: 'ngx-tab2',
+  template: `
+    <p>Tab 2 works!</p>
+  `,
+})
+export class Tab2Component { }
+
 @Component({
   selector: 'ngx-tabs',
   styleUrls: ['./tabs.component.scss'],
   templateUrl: './tabs.component.html',
 })
 export class TabsComponent {
+
+  tabs: any[] = [
+    {
+      title: 'Tab #1',
+      route: '/pages/ui-features/tabs/tab1',
+    },
+    {
+      title: 'Tab #2',
+      route: '/pages/ui-features/tabs/tab2',
+    },
+  ];
+
 }

src/app/pages/ui-features/ui-features-routing.module.ts

@@ -7,7 +7,7 @@ import { GridComponent } from './grid/grid.component';
 import { IconsComponent } from './icons/icons.component';
 import { ModalsComponent } from './modals/modals.component';
 import { TypographyComponent } from './typography/typography.component';
-import { TabsComponent } from './tabs/tabs.component';
+import { TabsComponent, Tab1Component, Tab2Component } from './tabs/tabs.component';
 
 const routes: Routes = [{
   path: '',
@@ -30,6 +30,17 @@ const routes: Routes = [{
   }, {
     path: 'tabs',
     component: TabsComponent,
+    children: [{
+      path: '',
+      redirectTo: 'tab1',
+      pathMatch: 'full',
+    }, {
+      path: 'tab1',
+      component: Tab1Component,
+    }, {
+      path: 'tab2',
+      component: Tab2Component,
+    }],
   }],
 }];
 

src/app/pages/ui-features/ui-features.module.ts

@@ -19,7 +19,7 @@ import { GroupButtonsComponent } from './buttons/group/group.component';
 import { LargeButtonsComponent } from './buttons/large/large.component';
 import { ModalComponent } from './modals/modal/modal.component';
 import { TypographyComponent } from './typography/typography.component';
-import { TabsComponent } from './tabs/tabs.component';
+import { TabsComponent, Tab1Component, Tab2Component } from './tabs/tabs.component';
 
 const COMPONENTS = [
   UiFeaturesComponent,
@@ -38,6 +38,8 @@ const COMPONENTS = [
   ModalComponent,
   TypographyComponent,
   TabsComponent,
+  Tab1Component,
+  Tab2Component,
 ];
 
 @NgModule({