Extracted templates

src/app/shared/components/presentationals/shared-data-table/shared-data-table.presentational.html

@@ -270,80 +270,21 @@
             <ng-template [ngIf]="col.component"
                          [ngIfElse]="noComponent"
             >
-              <ng-container [ngSwitch]="col.component">
-                <dlcm-aip-status-summary *ngSwitchCase="dataTableComponentEnum.aipStatusSummaryPresentational"
-                                         [aipCopyList]="rowData"
-                ></dlcm-aip-status-summary>
-
-                <dlcm-aip-status-name *ngSwitchCase="dataTableComponentEnum.aipStatusNamePresentational"
-                                      [aipCopyList]="rowData"
-                ></dlcm-aip-status-name>
-
-                <dlcm-aip-status-orgunit-name *ngSwitchCase="dataTableComponentEnum.aipStatusOrgUnitPresentational"
-                                              [aipCopyList]="rowData"
-                ></dlcm-aip-status-orgunit-name>
-
-                <dlcm-shared-admin-research-domain-label *ngSwitchCase="dataTableComponentEnum.adminResearchDomainLabel"
-                                                         [researchDomain]="rowData"
-                                                         [language]="col.field"
-                ></dlcm-shared-admin-research-domain-label>
-
-                <dlcm-shared-compliance-level-rating *ngSwitchCase="dataTableComponentEnum.conformityLevelStar"
-                                                     [withLabel]="false"
-                                                     [center]="true"
-                                                     [value]="getCellData(rowData, col)"
-                >
-                </dlcm-shared-compliance-level-rating>
-
-                <dlcm-shared-datafile-quick-status *ngSwitchCase="dataTableComponentEnum.dataFileQuickStatus"
-                                                   #quickStatus
-                                                   [value]="getCellData(rowData, col)"
-                                                   [matTooltip]="quickStatus.toolipToTranslate | translate"
-                >
-                </dlcm-shared-datafile-quick-status>
-
-                <ng-template [ngSwitchCase]="dataTableComponentEnum.jobExecutionProgression">
-                  <mat-progress-bar *ngIf="getCellData(rowData, col) !== 100"
-                                    mode="determinate"
-                                    [value]="getCellData(rowData, col)"
-                  ></mat-progress-bar>
-                </ng-template>
+              <ng-template [ngTemplateOutlet]="colComponentTemplate"
+                           [ngTemplateOutletContext]="{rowData: rowData, col: col}">
+              </ng-template>
 
-                <ng-template [ngSwitchCase]="dataTableComponentEnum.organizationalUnitName">
-                  <dlcm-shared-organizational-unit-name-container [id]="getCellData(rowData, col)"
-                  ></dlcm-shared-organizational-unit-name-container>
-                </ng-template>
-              </ng-container>
             </ng-template>
 
             <ng-template #noComponent>
-              <ng-template [ngIf]="col.type === fieldTypeEnum.size"
-                           [ngIfElse]="normal"
-              >
-                {{getCellData(rowData, col) | filesize}}
-              </ng-template>
-
-              <ng-template #normal>
-                <ng-template [ngIf]="col.translate"
-                             [ngIfElse]="noTranslate"
-                >
-              <span [matTooltip]="getCellData(rowData, col) | translate"
-                    [matTooltipShowDelay]="TIME_BEFORE_DISPLAY_TOOLTIP"
-              >
-                {{getCellData(rowData, col) | translate}}
-              </span>
-                </ng-template>
 
-                <ng-template #noTranslate>
-              <span [matTooltip]="getCellData(rowData, col)"
-                    [matTooltipShowDelay]="TIME_BEFORE_DISPLAY_TOOLTIP"
-              >
-                {{getCellData(rowData, col)}}
-              </span>
-                </ng-template>
+              <ng-template [ngTemplateOutlet]="colNoComponentTemplate"
+                           [ngTemplateOutletContext]="{rowData: rowData, col: col}">
               </ng-template>
+
             </ng-template>
           </td>
+
           <td *ngIf="isSmallerOrEqualThanMd"
               class="mobile-action-bar"
           >
@@ -404,3 +345,86 @@
     </div>
   </div>
 </ng-template>
+
+<ng-template #colComponentTemplate
+             let-rowData="rowData"
+             let-col="col">
+
+  <ng-container [ngSwitch]="col.component">
+    <dlcm-aip-status-summary *ngSwitchCase="dataTableComponentEnum.aipStatusSummaryPresentational"
+                             [aipCopyList]="rowData"
+    ></dlcm-aip-status-summary>
+
+    <dlcm-aip-status-name *ngSwitchCase="dataTableComponentEnum.aipStatusNamePresentational"
+                          [aipCopyList]="rowData"
+    ></dlcm-aip-status-name>
+
+    <dlcm-aip-status-orgunit-name *ngSwitchCase="dataTableComponentEnum.aipStatusOrgUnitPresentational"
+                                  [aipCopyList]="rowData"
+    ></dlcm-aip-status-orgunit-name>
+
+    <dlcm-shared-admin-research-domain-label *ngSwitchCase="dataTableComponentEnum.adminResearchDomainLabel"
+                                             [researchDomain]="rowData"
+                                             [language]="col.field"
+    ></dlcm-shared-admin-research-domain-label>
+
+    <dlcm-shared-compliance-level-rating *ngSwitchCase="dataTableComponentEnum.conformityLevelStar"
+                                         [withLabel]="false"
+                                         [center]="true"
+                                         [value]="getCellData(rowData, col)"
+    >
+    </dlcm-shared-compliance-level-rating>
+
+    <dlcm-shared-datafile-quick-status *ngSwitchCase="dataTableComponentEnum.dataFileQuickStatus"
+                                       #quickStatus
+                                       [value]="getCellData(rowData, col)"
+                                       [matTooltip]="quickStatus.toolipToTranslate | translate"
+    >
+    </dlcm-shared-datafile-quick-status>
+
+    <ng-template [ngSwitchCase]="dataTableComponentEnum.jobExecutionProgression">
+      <mat-progress-bar *ngIf="getCellData(rowData, col) !== 100"
+                        mode="determinate"
+                        [value]="getCellData(rowData, col)"
+      ></mat-progress-bar>
+    </ng-template>
+
+    <ng-template [ngSwitchCase]="dataTableComponentEnum.organizationalUnitName">
+      <dlcm-shared-organizational-unit-name-container [id]="getCellData(rowData, col)"
+      ></dlcm-shared-organizational-unit-name-container>
+    </ng-template>
+  </ng-container>
+
+</ng-template>
+
+<ng-template #colNoComponentTemplate
+             let-rowData="rowData"
+             let-col="col">
+
+  <ng-template [ngIf]="col.type === fieldTypeEnum.size"
+               [ngIfElse]="normal"
+  >
+    {{getCellData(rowData, col) | filesize}}
+  </ng-template>
+
+  <ng-template #normal>
+    <ng-template [ngIf]="col.translate"
+                 [ngIfElse]="noTranslate"
+    >
+              <span [matTooltip]="getCellData(rowData, col) | translate"
+                    [matTooltipShowDelay]="TIME_BEFORE_DISPLAY_TOOLTIP"
+              >
+                {{getCellData(rowData, col) | translate}}
+              </span>
+    </ng-template>
+
+    <ng-template #noTranslate>
+              <span [matTooltip]="getCellData(rowData, col)"
+                    [matTooltipShowDelay]="TIME_BEFORE_DISPLAY_TOOLTIP"
+              >
+                {{getCellData(rowData, col)}}
+              </span>
+    </ng-template>
+  </ng-template>
+
+</ng-template>