From 2b766e07760cbec68445719a61a11ba02103861f Mon Sep 17 00:00:00 2001
From: mico <mi-const@yandex.ru>
Date: Sun, 24 Jan 2021 11:50:11 +0300
Subject: [PATCH] + TabGroupLabelDirective for label templates

---
 .../components/tab-group/tab-group.component.html     |  7 ++++++-
 .../core/components/tab-group/tab-group.component.ts  | 11 ++++++++++-
 src/app/core/core.module.ts                           |  4 +++-
 3 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/src/app/core/components/tab-group/tab-group.component.html b/src/app/core/components/tab-group/tab-group.component.html
index 3cc9a1e..838b4b0 100644
--- a/src/app/core/components/tab-group/tab-group.component.html
+++ b/src/app/core/components/tab-group/tab-group.component.html
@@ -1,7 +1,12 @@
+<ng-template #defaultLabel let-itemLabel>{{itemLabel}}</ng-template>
+
 <div class="tab-group" role="tabgroup">
   <ul role="tablist">
     <li role="presentation" *ngFor="let label of labels; index as i">
-      <button role="tab" [attr.aria-selected]="i === selection" (click)="selectionChange.emit(i)">{{label}}</button>
+      <button role="tab" [attr.aria-selected]="i === selection" (click)="selectionChange.emit(i)">
+        <ng-template [ngTemplateOutlet]="labelTemplate?.templateRef || defaultLabel"
+          [ngTemplateOutletContext]="{ $implicit: label }"></ng-template>
+      </button>
     </li>
   </ul>
   <div role="tabpanel">
diff --git a/src/app/core/components/tab-group/tab-group.component.ts b/src/app/core/components/tab-group/tab-group.component.ts
index a73f295..d7f389d 100644
--- a/src/app/core/components/tab-group/tab-group.component.ts
+++ b/src/app/core/components/tab-group/tab-group.component.ts
@@ -1,7 +1,14 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { Component, ContentChild, Directive, EventEmitter, Input, Output, TemplateRef } from '@angular/core';
 
 export const TAB_SPLITTER = '|';
 
+@Directive({
+  selector: '[appTabGroupLabel]'
+})
+export class TabGroupLabelDirective {
+  constructor(public templateRef: TemplateRef<any>) {}
+}
+
 @Component({
   selector: 'app-tab-group',
   templateUrl: './tab-group.component.html',
@@ -20,5 +27,7 @@ export class TabGroupComponent {
   @Input() selection = -1;
   @Output() selectionChange = new EventEmitter<number>();
 
+  @ContentChild(TabGroupLabelDirective, { static: false }) labelTemplate: TabGroupLabelDirective;
+
   constructor() { }
 }
diff --git a/src/app/core/core.module.ts b/src/app/core/core.module.ts
index e18a5a9..bdee69a 100644
--- a/src/app/core/core.module.ts
+++ b/src/app/core/core.module.ts
@@ -6,19 +6,21 @@ import { XrangePipe } from './pipes/xrange.pipe';
 import { FocusDirective } from './directives/focus.directive';
 import { GestureDirective } from './directives/gesture.directive';
 
-import { TabGroupComponent } from './components/tab-group/tab-group.component';
+import { TabGroupComponent, TabGroupLabelDirective } from './components/tab-group/tab-group.component';
 
 @NgModule({
   declarations: [
     FocusDirective,
     GestureDirective,
     TabGroupComponent,
+    TabGroupLabelDirective,
     XrangePipe,
   ],
   exports: [
     FocusDirective,
     GestureDirective,
     TabGroupComponent,
+    TabGroupLabelDirective,
     XrangePipe,
   ],
   imports: [