Migrated gist (migrated)

ph-tab-navigation (ng-template)

<nav>
  <ph-tab-navigation 
    [ngTemplate]="true" 
    [displayTabContent]="false" 
    (tabChanged)="tabChanged($event)"
    (closeTab)="onCloseTab($event)"
    defaultTabId="tab2"
  >
    <ph-tab-navigation-item 
      *ngFor="let tab of tabsNgTemplate; let i = index"
      tabId="{{tab.tabId}}"
      tabName="{{tab.tabName}}" 
      [enableIcons]="tab.enableIcons" 
      iconName="{{tab.iconName}}" 
      iconColour="{{tab.iconColour}}" // Only use if there's a business requirement, otherwise please remove
      closeColour="{{tab.closeColour}}" // Only use if there's a business requirement, otherwise please remove
      [showRightDivider]="tab.showRightDivider"
      [enableCount]="tab.enableCount"
      [enableClose]="tab.enableClose"
      tabCount="{{tab.tabCount}}"
      countColour="{{tab.countColour}}"
      [tabDisabled]="tab.tabDisabled"
    > 
      <ng-template phTabNavigationContent>
        <div *ngIf="tab.showTabOneContent">
          <h2 class="boxed">Tab 1 content</h2>
          <p>
            This is Tab 1 content and is passed into (ng-template)
            which should be nested inside div.content-container.
            In this example we have 'enableIcons' set to 'true', 'iconColour' 
            set to 'ph-red-100' and 'iconName' set to 'error'
          </p>
          <ul class="margin-top-1">
            <li>
              You can choose an 
              <a href="https://fonts.google.com/icons?icon.set=Material+Icons&icon.style=Filled" target="_blank">iconName here</a>
            </li>
            <li>
              You can choose an 
              <a routerLink="/colours">iconColour here</a>
            </li>
          </ul>
        </div>
        <div *ngIf="tab.showTabTwoContent">
          <h2 class="boxed">Tab 2 content</h2>
          <p>
            This is Tab 2 content and is passed into (ng-template)
            which should be nested inside div.content-container.
            In this example we have 'enableIcons' set to 'true', 'iconColour' 
            set to 'ph-red-100' and 'iconName' set to 'error'
          </p>
          <ul class="margin-top-1">
            <li>
              You can choose an 
              <a href="https://fonts.google.com/icons?icon.set=Material+Icons&icon.style=Filled" target="_blank">iconName here</a>
            </li>
            <li>
              You can choose an 
              <a routerLink="/colours">iconColour here</a>
            </li>
          </ul>
        </div>
        <div *ngIf="tab.showTabThreeContent">
          <h2 class="boxed">Tab 3 content</h2>
          <p>
            This is Tab 3 content and is passed into (ng-template)
            which should be nested inside div.content-container.
            In this example we have 'enableCount' set to 'true' and 'countColour' 
            set to 'bg-ph-red-100'
          </p>
          <ul class="margin-top-1">
            <li>
              You can choose an 
              <a href="https://fonts.google.com/icons?icon.set=Material+Icons&icon.style=Filled" target="_blank">iconName here</a>
            </li>
            <li>
              You can choose an 
              <a routerLink="/colours">iconColour here</a>
            </li>
          </ul>
        </div>
      </ng-template>
    </ph-tab-navigation-item>
  </ph-tab-navigation>
</nav>

<section class="content-container padding-bottom-0" *ngIf="activeTab">
  <ng-template *ngTemplateOutlet="activeTab.templateRef"></ng-template>
</section>

<!-- TypeScript -->
import { Component, AfterContentChecked, ChangeDetectorRef } from '@angular/core';
import { TabNavigationItemComponent } from '@angloamerican/components';

activeTab: TabNavigationItemComponent;
tabNgTemplate: boolean;

constructor(private changeDetector: ChangeDetectorRef) {}

activeTab: TabNavigationItemComponent;
tabChanged(tab: TabNavigationItemComponent) {
  this.activeTab = tab;
}

onCloseTab(tabId: any) { 
  console.log(`Tab closed id:${tabId}`);
  if(this.enableClose = true) {
    this.toggleModal = true;
    this.ngTemplate = true;
    this.ngTemplateSecondary = false;
    this.routerOutlet = false;
    this.routerOutletSecondary = false;
  }
}

removeTab(index: number) {
  if(this.tabsNgTemplate) {
    this.tabsNgTemplate.splice(index, 1)
    this.toggleModal = false;
  }
}

tabsNgTemplate = [
  {
    tabId: 'tab1',
    tabName: 'Tab 1',
    enableIcons: true,
    iconName: 'error',
    iconColour: 'ph-red-100',
    tabDisabled: false,
    showRightDivider: false,
    enableCount: false,
    enableClose: false,
    tabCount: '',
    countColour: '',
    showTabOneContent: true
  },
  {
    tabName: 'Tab 2',
    enableIcons: true,
    iconName: 'check_circle',
    iconColour: 'ph-green-100',
    tabDisabled: false,
    showRightDivider: false,
    enableCount: false,
    enableClose: false,
    tabCount: '',
    countColour: '',
    showTabTwoContent: true
  }
]

ngAfterContentChecked(): void {
  this.changeDetector.detectChanges();
}