ng-template, ng-container, ng-content, *ngTemplateOutlet [Angular 2+]

Tối ưu không gian cho HTML bằng cách sử dụng các thẻ ng-template, ng-container, ng-content, *ngTemplateOutlet

<ng-template>

angular 2+

<ng-template [ngIf]="true" [ngIfElse]="second"></ng-template>
<ng-template #second>
 <ng-container *ngIf="foo === 2;else third"></ng-container>
</ng-template>
<ng-template #third></ng-template>

<ng-container>

angular 2+

<ng-container [ngSwitch]="translate.currentLang"> 
  <ng-container *ngSwitchCase="'en'">abc</ng-container>
  <ng-container *ngSwitchCase="'vi'">def</ng-container>
  <ng-container *ngSwitchDefault>LMN</ng-container>
</ng-container>

<ng-container [ngSwitch]="true"> 
  <ng-container *ngSwitchCase="translate.currentLang === 'en'">abc</ng-container>
  <ng-container *ngSwitchCase="translate.currentLang === 'vi' || translate.currentLang = 'vn'">Việt Nam</ng-container>
  <ng-container *ngSwitchDefault>LMN</ng-container>
</ng-container>

<ng-content>

*ngTemplateOutlet

ngTemplateOutlet - ngTemplateOutletContext

2021 update

Ví dụ 1:
<ng-container 
   [ngTemplateOutlet]="gaugeTemplate" 
   [ngTemplateOutletContext]="{ cloneConfig: widget.config }">
</ng-container>

<ng-template #gaugeTemplate let-cloneConfig="cloneConfig">
  <div [class]="'gauge_' + cloneConfig?.type">
    <ngx-gauge
      [thick]="cloneConfig?.thick"
      [foregroundColor]="getThresholdColorByRange()?.color"
      [backgroundColor]="convertColorOpacity(getThresholdColorByRange()?.color)"
      [min]="cloneConfig?.gaugeMin" 
      [max]="cloneConfig?.gaugeMax" 
      [type]="cloneConfig?.type" 
      [value]="live ? (widgetMapingData.Center?.sensorId?.currentSensorValue ? widgetMapingData.Center?.sensorId?.currentSensorValue : 0) : cloneConfig?.value" 
      [label]="cloneConfig?.bottomVariable + ' ' + checkNull(widgetMapingData?.Bottom?.sensorId?.currentSensorValue)" 
      [append]="cloneConfig?.centerVariable">
    </ngx-gauge>
  </div>
</ng-template>

Ví dụ 2:
<ng-template
      #defaultTemplate
      let-columnDate="columnDate"
      let-dayStartHour="dayStartHour"
      let-dayStartMinute="dayStartMinute"
      let-dayEndHour="dayEndHour"
      let-dayEndMinute="dayEndMinute"
      let-isVisible="isVisible"
      let-topPx="topPx">
      <div
        class="cal-current-time-marker"
        *ngIf="isVisible"
        [style.top.px]="topPx">
      </div>
</ng-template>
<ng-template
      [ngTemplateOutlet]="customTemplate || defaultTemplate"
      [ngTemplateOutletContext]="{
        columnDate: columnDate,
        dayStartHour: dayStartHour,
        dayStartMinute: dayStartMinute,
        dayEndHour: dayEndHour,
        dayEndMinute: dayEndMinute,
        isVisible: (marker$ | async)?.isVisible,
        topPx: (marker$ | async)?.top
      }">
</ng-template>
@Input() customTemplate: TemplateRef<any>;

INPUT