Previously we have tab-panel template defined like this:
<ul class="tab-panel-buttons" *ngIf="tabs"> <li [ngClass]="{selected: tab.selected}" (click)="selectTab(tab)" *ngFor="let tab of tabs;">{{tab.title}} </li> </ul> <ng-content></ng-content>
So the template is not overrideable. If we want later able to pass in a different template, we need to use some advanced features from Angular.
ng-template: We can wrap the whole header into <ng-template>, by defualt, ng-template will not render to the DOM.
<ng-template #defaultTabHeader> <ul class="tab-panel-buttons" *ngIf="tabs"> <li [ngClass]="{selected: tab.selected}" (click)="selectTab(tab)" *ngFor="let tab of tabs;">{{tab.title}} </li> </ul> </ng-template>
To be able to render the template to the DOM; we need to use <ng-content>:
<ng-template #defaultTabHeader let-tabs="tabsX"> <ul class="tab-panel-buttons" *ngIf="tabs"> <li [ngClass]="{selected: tab.selected}" (click)="selectTab(tab)" *ngFor="let tab of tabs;">{{tab.title}} </li> </ul> </ng-template> <ng-content *ngTemplateOutlet="defaultTabHeader; context: tabsContext"></ng-content> <ng-content></ng-content>
import {AfterContentInit, Component, ContentChildren, OnInit, QueryList} from '@angular/core'; import {AuTabComponent} from '../au-tab/au-tab.component'; @Component({ selector: 'au-tab-panel', templateUrl: './au-tab-panel.component.html', styleUrls: ['../tab-panel.component.scss'] }) export class AuTabPanelComponent implements OnInit, AfterContentInit { @ContentChildren(AuTabComponent) tabs: QueryList<AuTabComponent>; constructor() { } ngOnInit() { } ngAfterContentInit(): void { const selectedTab = this.tabs.find(tab => tab.selected); if(!selectedTab && this.tabs.first) { this.tabs.first.selected = true; } } selectTab(tab: AuTabComponent) { this.tabs.forEach(t => t.selected = false); tab.selected = true; } get tabsContext() { return { tabsX: this.tabs }; } }