Migrated gist (migrated)

ph-blade (router-outlet)

<!-- BUTTON TO TRIGGER THE BLADE -->
<ph-button 
  (buttonClick)="bladeIsOpen($event)"
  buttonText="Open blade" 
  buttonClass="primary"
  fieldClass="label-hidden"
  >
</ph-button>

<!----------------------------------------------------------->
<!--------------------- BLADE TEMPLATE ---------------------->
<!----------------------------------------------------------->
<ph-blade 
  [bladeTabs]="true"
  [blockPageUI]="false"
  [showBladeModal]="notifications($event)"
  [enablePinning]="enablePin"
  [toggleBlade]="toggleBlade"
  (bladeOpen)="bladeIsOpen($event)"
  (bladePinned)="bladeIsPinned($event)"
  [suppressAutoClose]="false"
  topPosition="3.5rem"
  zIndex="30"
  bladeSize="one-column-width"
  bladeHeading="Your blade heading..."
  [enableIcon]="true"
  iconName="Icon name here" // TO CHOOSE AN ICON VISIT 'https://fonts.google.com/icons?icon.set=Material+Icons'
>
  <form name="myForm">
    <ng-container blade-tabs>
      <ph-tab-navigation [routerOutlet]="true">
        <ng-container list-items>
            <li *ngFor="let tab of tabs">
              <a 
                [id]="tab.tabId" 
                routerLinkActive="active"
                [routerLinkActiveOptions]="{exact: true, isActive: true}"
                [routerLink]="tab.routerLink"
              >
                {{ tab.name }}
              </a>
            </li>
        </ng-container>
      </ph-tab-navigation>
    </ng-container>
    
    <article class="blade-content">
      <router-outlet></router-outlet>
    </article>
    
    <ph-blade-footer>
     Your footer buttons here...
    </ph-blade-footer>
  </form>
</ph-blade>

<!----------------------------------------------------------->
<!------------------- BLADE TYPESCRIPT ---------------------->
<!----------------------------------------------------------->
import { TabNavigationItemComponent } from '@angloamerican/components';
import { RouterOutletItem } from '../class/tab-router-oulet';

toggleBlade: boolean;
pinBlade: boolean;
activeTab: TabNavigationItemComponent;

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

public readonly tabs: RouterOutletItem[] = [
    {
      tabId: 'tabOne',
      name: 'Accordions',
      routerLink: ['tab-page-one'],
      tabDisabled: false,
      enableCount: false,
      tabCount: null
    },
    {
      tabId: 'tabTwo',
      name: 'Mixed',
      routerLink: ['tab-page-two'],
      tabDisabled: false,
      enableCount: false,
      tabCount: null
    },
  ];
  
bladeIsOpen(open: boolean) {
  this.toggleBlade = open;
}

bladeIsPinned(togglePinned: boolean) {
  this.pinBlade = togglePinned;
}

<!----------------------------------------------------------->
<!--------------- YOUR APP-ROUTING.MODULE.TS ---------------->
<!----------------------------------------------------------->
import {BladeComponent} from './blade/blade.component';
import {TabPageOneComponent} from './tab-navigation/tab-page-one/tab-page-one.component';
import {TabPageTwoComponent} from './tab-navigation/tab-page-two/tab-page-two.component';

const routes: Routes = [
  { path: 'blade', component: BladeComponent, children: [
    { path: 'tab-page-one', component: TabPageOneComponent },
    { path: 'tab-page-two', component: TabPageTwoComponent }
  ] },
];

<!----------------------------------------------------------->
<!-------------- YOUR RouterOutletItem CLASS  --------------->
<!----------------------------------------------------------->
export class TabNavRouterOutlet {
    public tabId: string;
    public name: string;
    public tabDisabled: boolean;
    public routerLink: string | string[];
    public enableCount: boolean;
    public tabCount: number;
    public showRightDivider: boolean;
    public enableIcons: boolean;
    public iconName: string;
    public iconColor: string
}