feat(tabset): ability to provide template as tab label (#2829)

Author: evtkhvch

src/app/playground-components.ts

@@ -1351,6 +1351,12 @@ export const PLAYGROUND_COMPONENTS: ComponentLink[] = [
         component: 'TabsetDisabledComponent',
         name: 'Tabset Disabled',
       },
+      {
+        path: 'tabset-template-title.component',
+        link: '/tabset/tabset-template-title.component',
+        component: 'TabsetTemplateTitleComponent',
+        name: 'Tabset Template Title',
+      },
     ],
   },
   {

src/framework/theme/components/tabset/tab-title.directive.ts

@@ -0,0 +1,8 @@
+import { Directive, TemplateRef } from '@angular/core';
+
+@Directive({
+  selector: '[nbTabTitle]',
+})
+export class NbTabTitleDirective {
+  constructor(public templateRef: TemplateRef<any>) {}
+}

src/framework/theme/components/tabset/tabset.component.ts

@@ -24,6 +24,7 @@ import { NbComponentOrCustomStatus } from '../component-status';
 import { NbBadgePosition } from '../badge/badge.component';
 import { NbIconConfig } from '../icon/icon.component';
 import { NbTabContentDirective } from './tab-content.directive';
+import { NbTabTitleDirective } from './tab-title.directive';
 
 /**
  * Specific tab container.
@@ -51,6 +52,7 @@ import { NbTabContentDirective } from './tab-content.directive';
 })
 export class NbTabComponent {
   @ContentChild(NbTabContentDirective) tabContentDirective: NbTabContentDirective;
+  @ContentChild(NbTabTitleDirective) tabTitleDirective: NbTabTitleDirective;
 
   /**
    * Tab title
@@ -248,6 +250,9 @@ export class NbTabComponent {
  * </nb-tabset>
  * ```
  *
+ * You can provide a template as a tab title via `<ng-template nbTabTitle>`:
+ * @stacked-example(Tab title template, tabset/tabset-template-title.component)
+ *
  * @styles
  *
  * tabset-background-color:
@@ -309,7 +314,13 @@ export class NbTabComponent {
       >
         <a href (click)="$event.preventDefault()" tabindex="-1" class="tab-link">
           <nb-icon *ngIf="tab.tabIcon" [config]="tab.tabIcon"></nb-icon>
-          <span *ngIf="tab.tabTitle" class="tab-text">{{ tab.tabTitle }}</span>
+          <ng-container
+            *ngIf="tab.tabTitleDirective; else textTitleTemplate"
+            [ngTemplateOutlet]="tab.tabTitleDirective.templateRef"
+          ></ng-container>
+          <ng-template #textTitleTemplate>
+            <span class="tab-text">{{ tab.tabTitle }}</span>
+          </ng-template>
         </a>
         <nb-badge
           *ngIf="tab.badgeText || tab.badgeDot"

src/framework/theme/components/tabset/tabset.module.ts

@@ -12,10 +12,11 @@ import { NbTabsetComponent, NbTabComponent } from './tabset.component';
 import { NbBadgeModule } from '../badge/badge.module';
 import { NbIconModule } from '../icon/icon.module';
 import { NbTabContentDirective } from './tab-content.directive';
+import { NbTabTitleDirective } from './tab-title.directive';
 
 const NB_TABSET_COMPONENTS = [NbTabsetComponent, NbTabComponent];
 
-const NB_TABSET_DIRECTIVES = [NbTabContentDirective];
+const NB_TABSET_DIRECTIVES = [NbTabContentDirective, NbTabTitleDirective];
 
 @NgModule({
   imports: [NbSharedModule, NbBadgeModule, NbIconModule],

src/framework/theme/public_api.ts

@@ -81,6 +81,7 @@ export * from './components/datepicker/date-timepicker.component';
 export * from './components/datepicker/calendar-with-time.component';
 export * from './components/tabset/tabset.component';
 export * from './components/tabset/tab-content.directive';
+export * from './components/tabset/tab-title.directive';
 export * from './components/user/user.module';
 export * from './components/user/user.component';
 export * from './components/actions/actions.module';

src/playground/with-layout/tabset/tabset-routing.module.ts

@@ -5,7 +5,7 @@
  */
 
 import { NgModule } from '@angular/core';
-import { RouterModule, Route} from '@angular/router';
+import { RouterModule, Route } from '@angular/router';
 import {
   RouteTabsetShowcaseChild1Component,
   RouteTabsetShowcaseChild2Component,
@@ -18,6 +18,7 @@ import { TabsetShowcaseComponent } from './tabset-showcase.component';
 import { TabsetTestComponent } from './tabset-test.component';
 import { TabsetWidthComponent } from './tabset-width.component';
 import { TabsetDisabledComponent } from './tabset-disabled.component';
+import { TabsetTemplateTitleComponent } from './tabset-template-title.component';
 
 const routes: Route[] = [
   {
@@ -71,10 +72,14 @@ const routes: Route[] = [
     path: 'tabset-disabled.component',
     component: TabsetDisabledComponent,
   },
+  {
+    path: 'tabset-template-title.component',
+    component: TabsetTemplateTitleComponent,
+  },
 ];
 
 @NgModule({
-  imports: [ RouterModule.forChild(routes) ],
-  exports: [ RouterModule ],
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
 })
 export class TabsetRoutingModule {}

src/playground/with-layout/tabset/tabset-template-title.component.html

@@ -0,0 +1,16 @@
+<nb-card>
+  <nb-card-body>
+    <nb-tabset>
+      <nb-tab>
+        <ng-template nbTabTitle>
+          <span>Orders</span>
+        </ng-template>
+        <p>List of <strong>orders</strong>.</p>
+      </nb-tab>
+      <nb-tab>
+        <span *nbTabTitle>Transactions</span>
+        <p>List of <strong>transactions</strong>.</p>
+      </nb-tab>
+    </nb-tabset>
+  </nb-card-body>
+</nb-card>

src/playground/with-layout/tabset/tabset-template-title.component.ts

@@ -0,0 +1,20 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+@Component({
+  templateUrl: './tabset-template-title.component.html',
+  styles: [
+    `
+      :host nb-tab {
+        padding: 1.25rem;
+      }
+    `,
+  ],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class TabsetTemplateTitleComponent {}

src/playground/with-layout/tabset/tabset.module.ts

@@ -19,6 +19,7 @@ import {
   RouteTabsetShowcaseChild3Component,
 } from './components/route-tabset-children.component';
 import { TabsetDisabledComponent } from './tabset-disabled.component';
+import { TabsetTemplateTitleComponent } from './tabset-template-title.component';
 
 @NgModule({
   declarations: [
@@ -32,12 +33,8 @@ import { TabsetDisabledComponent } from './tabset-disabled.component';
     RouteTabsetShowcaseChild2Component,
     TabsetDisabledComponent,
     RouteTabsetShowcaseChild3Component,
+    TabsetTemplateTitleComponent,
   ],
-  imports: [
-    NbTabsetModule,
-    NbRouteTabsetModule,
-    NbCardModule,
-    TabsetRoutingModule,
-  ],
+  imports: [NbTabsetModule, NbRouteTabsetModule, NbCardModule, TabsetRoutingModule],
 })
 export class TabsetModule {}