[Angular] Angular Advanced Features - ng-template , ng-container, ngTemplateOutlet

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
    };
  }
 
}