Migrate to new Angular control flow syntax

Author: abelgomez

src/app/item-page/simple/field-components/specific-field/license/item-page-license-field.component.html

@@ -1,29 +1,31 @@
-<div *ngIf="licenses.length > 0 || uris.length > 0" class="item-page-field">
-  <ng-container *ngIf="(hasCcLicenseName$ | async) && (hasCcLicenseUri$ | async); then ccLicense; else default">
-  </ng-container>
-  <ng-template #ccLicense>
-    <ds-item-page-cc-license-field [item]="item" [variant]="'full'"></ds-item-page-cc-license-field>
-  </ng-template>
-  <ng-template #default>
-    <ds-metadata-field-wrapper [label]="'item.page.license.title' | translate">
-      <ng-container *ngIf="licenses.length === uris.length; then licensesWithLink; else listOfLicenses">
-      </ng-container>
-      <ng-template #licensesWithLink>
-        <ng-container *ngFor="let license of licenses; let last=last; let i=index;">
-          <a [href]="uris[i]" target="_blank" class="license-link"><span class="license-text">{{ license }}</span></a>
-          <span class="separator" *ngIf="!last" [innerHTML]="separator"></span>
-        </ng-container>
-      </ng-template>
-      <ng-template #listOfLicenses>
-        <ng-container *ngFor="let license of licenses; let last=last;">
-          <span class="license-text">{{ license }}</span>
-          <span class="separator" *ngIf="!last || uris.length > 0" [innerHTML]="separator"></span>
-        </ng-container>
-        <ng-container *ngFor="let uri of uris; let last=last;">
-          <a [href]="uri" target="_blank" class="license-link"><span class="license-text">{{ uri }}</span></a>
-          <span class="separator" *ngIf="!last" [innerHTML]="separator"></span>
-        </ng-container>
-      </ng-template>
-    </ds-metadata-field-wrapper>
-  </ng-template>
-</div>
+@if (licenses.length > 0 || uris.length > 0) {
+  <div class="item-page-field">
+    @if ((hasCcLicenseName$ | async) && (hasCcLicenseUri$ | async)) {
+      <ds-item-page-cc-license-field [item]="item" [variant]="'full'"></ds-item-page-cc-license-field>
+    } @else {
+      <ds-metadata-field-wrapper [label]="'item.page.license.title' | translate">
+        @if (licenses.length === uris.length) {
+          @for (license of licenses; track license; let last=$last; let i=$index) {
+            <a [href]="uris[i]" target="_blank" class="license-link"><span class="license-text">{{ license }}</span></a>
+            @if (!last) {
+              <span class="separator" [innerHTML]="separator"></span>
+            }
+          }
+        } @else {
+          @for (license of licenses; track license; let last=$last) {
+            <span class="license-text">{{ license }}</span>
+            @if (!last || uris.length > 0) {
+              <span class="separator" [innerHTML]="separator"></span>
+            }
+          }
+          @for (uri of uris; track uri; let last=$last) {
+            <a [href]="uri" target="_blank" class="license-link"><span class="license-text">{{ uri }}</span></a>
+            @if (!last) {
+              <span class="separator" [innerHTML]="separator"></span>
+            }
+          }
+        }
+      </ds-metadata-field-wrapper>
+    }
+  </div>
+}

src/app/item-page/simple/field-components/specific-field/license/item-page-license-field.component.ts

@@ -33,7 +33,7 @@ import { MetadataFieldWrapperComponent } from 'src/app/shared/metadata-field-wra
   selector: 'ds-item-page-license-field',
   templateUrl: './item-page-license-field.component.html',
   standalone: true,
-  imports: [NgIf, NgFor, NgClass, NgStyle, TranslateModule, MetadataFieldWrapperComponent, ItemPageCcLicenseFieldComponent, AsyncPipe],
+  imports: [NgClass, NgStyle, TranslateModule, MetadataFieldWrapperComponent, ItemPageCcLicenseFieldComponent, AsyncPipe],
 })
 /**
  * Displays the item's licenses