feat(tabs/bottomNav): template support for tab items #4297

Author: rmkrmk

projects/igniteui-angular/src/lib/tabbar/tabbar.component.ts

@@ -615,6 +615,10 @@ export class IgxTabComponent {
     @ViewChild('defaultTabTemplate', { read: TemplateRef })
     protected defaultTabTemplate: TemplateRef<any>;
 
+    /**@hidden*/
+    @ContentChild(IgxTabTemplateDirective, { read: IgxTabTemplateDirective })
+    protected customTabTemplateDir: IgxTabTemplateDirective;
+
     /**
      * Returns the `template` for this IgxTabComponent.
      * ```typescript
@@ -626,6 +630,9 @@ export class IgxTabComponent {
         if (this.relatedPanel && this.relatedPanel.customTabTemplate) {
             return this.relatedPanel.customTabTemplate;
         }
+        if (this.customTabTemplateDir) {
+            return this.customTabTemplateDir.template;
+        }
         return this.defaultTabTemplate;
     }
 

projects/igniteui-angular/src/lib/tabs/tab-item.component.ts

@@ -1,5 +1,6 @@
 import {
     Component,
+    ContentChild,
     ElementRef,
     HostBinding,
     HostListener,
@@ -10,6 +11,7 @@ import {
 
 import { IgxTabsGroupComponent } from './tabs-group.component';
 import { IgxTabItemBase, IgxTabsBase } from './tabs.common';
+import { IgxTabItemTemplateDirective } from './tabs.directives';
 
 @Component({
     selector: 'igx-tab-item',
@@ -72,6 +74,10 @@ export class IgxTabItemComponent implements IgxTabItemBase {
     @ViewChild('defaultTabTemplate', { read: TemplateRef })
     protected defaultTabTemplate: TemplateRef<any>;
 
+    /**@hidden*/
+    @ContentChild(IgxTabItemTemplateDirective, { read: IgxTabItemTemplateDirective })
+    protected customTabTemplateDir: IgxTabItemTemplateDirective;
+
     private _nativeTabItem: ElementRef;
     private _changesCount = 0; // changes and updates accordingly applied to the tab.
     private _isSelected = false;
@@ -278,6 +284,9 @@ export class IgxTabItemComponent implements IgxTabItemBase {
         if (this.relatedGroup && this.relatedGroup.customTabTemplate) {
             return this.relatedGroup.customTabTemplate;
         }
+        if (this.customTabTemplateDir) {
+            return this.customTabTemplateDir.template;
+        }
         return this.defaultTabTemplate;
     }
 

src/app/bottomnav-routing/bottomnav-routing.sample.html

@@ -26,6 +26,10 @@
                             routerLink="/bottom-navigation-routing/view3"
                             routerLinkActive #rla3="routerLinkActive"
                             [isSelected]="rla3.isActive">
+                            <ng-template igxTab let-context>
+                                <span>{{context.label}}</span>
+                                <span>[Retemplated tab]</span>
+                            </ng-template>
                         </igx-tab>
 
                     </igx-bottom-nav>

src/app/tabs-routing/tabs-routing.sample.html

@@ -24,6 +24,10 @@ <h3 class="sample-title">Routing sample</h3>
                     routerLink="/tabs-routing/view3"
                     routerLinkActive #rla3="routerLinkActive"
                     [isSelected]="rla3.isActive">
+                    <ng-template igxTab let-context>
+                        <span>{{context.label}}</span>
+                        <span>[Retemplated tab]</span>
+                    </ng-template>
                 </igx-tab-item>
             </igx-tabs>
             <div>