Migrate code to new @if/@for/@switch syntax

src/app/hf-markdown/copy-to-clipboard/copy-to-clipboard.component.html

@@ -1,4 +1,7 @@
-<span class="copy-code" (click)="clicked()" title="Copy to Clipboard"
-  ><cds-icon shape="copy" inverse *ngIf="!wasClicked"></cds-icon
-  ><cds-icon shape="check" inverse *ngIf="wasClicked"></cds-icon
-></span>
+<span class="copy-code" (click)="clicked()" title="Copy to Clipboard">
+  @if (!wasClicked) {
+    <cds-icon shape="copy" inverse></cds-icon>
+  } @else {
+    <cds-icon shape="check" inverse></cds-icon>
+  }
+</span>

src/app/hf-markdown/single-task-verification-markdown/single-task-verification-markdown.component.html

@@ -24,107 +24,120 @@
           inverse
         ></cds-icon>
       </button>
-      <div *ngIf="task?.success" class="label label-status label-success">
-        <cds-icon shape="check" inverse></cds-icon>
-      </div>
-      <div *ngIf="!task?.success" class="label label-status label-danger">
-        <cds-icon shape="times" inverse></cds-icon>
-      </div>
+      @if (task?.success) {
+        <div class="label label-status label-success">
+          <cds-icon shape="check" inverse></cds-icon>
+        </div>
+      } @else {
+        <div class="label label-status label-danger">
+          <cds-icon shape="times" inverse></cds-icon>
+        </div>
+      }
     </div>
   </summary>
 
-  <ul class="list-group" *ngIf="task">
-    <li class="list-group-item">
-      <p>
-        Description: <b>{{ task.description }}</b>
-      </p>
-      <p>
-        Command: <code>{{ task.command }}</code>
-      </p>
-    </li>
-    <li class="list-group-item" *ngIf="isOfReturnType(task, ['Match_Regex'])">
-      <p>
-        Regular Expression: <code>{{ task.expected_output_value }}</code>
-      </p>
-      <p>
-        Actual Output: <code>{{ task.actual_output_value }}</code>
-      </p>
-    </li>
-    <li
-      class="list-group-item"
-      *ngIf="isOfReturnType(task, ['Return_Text', 'Return_Code_And_Text'])"
-    >
-      <p>
-        Expected Output: <code>{{ task.expected_output_value }}</code>
-      </p>
-      <p>
-        Actual Output: <code>{{ task.actual_output_value }}</code>
-      </p>
-    </li>
-    <li
-      class="list-group-item"
-      *ngIf="isOfReturnType(task, ['Return_Code', 'Return_Code_And_Text'])"
-    >
-      <p>
-        Expected Returncode: <code>{{ task.expected_return_code }}</code>
-      </p>
-      <p>
-        Actual Returncode: <code>{{ task.actual_return_code }}</code>
-      </p>
-    </li>
-    <li class="list-group-item" *ngIf="taskUnset()">
-      <button
-        id="refreshButton"
-        (click)="elementClicked()"
-        class="label label-info"
-        label="Revalidate"
-      >
-        <cds-icon
-          [@rotatedState]="rotationState"
-          shape="sync"
-          inverse
-        ></cds-icon>
-      </button>
-      Run the validation checks once to see the result.
-    </li>
-    <li class="list-group-item" *ngIf="!taskUnset()">
-      <span *ngIf="task.success" class="label label-success">
-        <cds-icon shape="check" inverse></cds-icon>
-      </span>
-      <span *ngIf="!task.success" class="label label-danger">
-        <cds-icon shape="times" inverse></cds-icon>
-      </span>
-      <ng-container *ngIf="isOfReturnType(task, ['Match_Regex'])">
-        <span *ngIf="task.success">The Regex matches the output string.</span>
-        <span *ngIf="!task.success"
-          >The Regex does not match the output string.</span
-        >
-      </ng-container>
-      <ng-container *ngIf="isOfReturnType(task, ['Return_Code'])">
-        <span *ngIf="task.success"
-          >Returned Code matches the expected Code</span
-        >
-        <span *ngIf="!task.success">
-          Returned Code does not match the expected Code
-        </span>
-      </ng-container>
-      <ng-container *ngIf="isOfReturnType(task, ['Return_Text'])">
-        <span *ngIf="task.success"
-          >Returned Text matches the expected Text</span
-        >
-        <span *ngIf="!task.success">
-          Returned Text does not match the expected Text
-        </span>
-      </ng-container>
-      <ng-container *ngIf="isOfReturnType(task, ['Return_Code_And_Text'])">
-        <span *ngIf="task.success">
-          Returned Text and Code match the expected Text and Code
-        </span>
-        <span *ngIf="!task.success">
-          Either returned Text, Returned Code or both do not match the expected
-          Text and Code
-        </span>
-      </ng-container>
-    </li>
-  </ul>
+  @if (task) {
+    <ul class="list-group">
+      <li class="list-group-item">
+        <p>
+          Description: <b>{{ task.description }}</b>
+        </p>
+        <p>
+          Command: <code>{{ task.command }}</code>
+        </p>
+      </li>
+      @if (isOfReturnType(task, ['Match_Regex'])) {
+        <li class="list-group-item">
+          <p>
+            Regular Expression: <code>{{ task.expected_output_value }}</code>
+          </p>
+          <p>
+            Actual Output: <code>{{ task.actual_output_value }}</code>
+          </p>
+        </li>
+      }
+      @if (isOfReturnType(task, ['Return_Text', 'Return_Code_And_Text'])) {
+        <li class="list-group-item">
+          <p>
+            Expected Output: <code>{{ task.expected_output_value }}</code>
+          </p>
+          <p>
+            Actual Output: <code>{{ task.actual_output_value }}</code>
+          </p>
+        </li>
+      }
+      @if (isOfReturnType(task, ['Return_Code', 'Return_Code_And_Text'])) {
+        <li class="list-group-item">
+          <p>
+            Expected Returncode: <code>{{ task.expected_return_code }}</code>
+          </p>
+          <p>
+            Actual Returncode: <code>{{ task.actual_return_code }}</code>
+          </p>
+        </li>
+      }
+      @if (taskUnset()) {
+        <li class="list-group-item">
+          <button
+            id="refreshButton"
+            (click)="elementClicked()"
+            class="label label-info"
+            label="Revalidate"
+          >
+            <cds-icon
+              [@rotatedState]="rotationState"
+              shape="sync"
+              inverse
+            ></cds-icon>
+          </button>
+          Run the validation checks once to see the result.
+        </li>
+      } @else {
+        <li class="list-group-item">
+          @if (task.success) {
+            <span class="label label-success">
+              <cds-icon shape="check" inverse></cds-icon>
+            </span>
+          } @else {
+            <span class="label label-danger">
+              <cds-icon shape="times" inverse></cds-icon>
+            </span>
+          }
+          @if (isOfReturnType(task, ['Match_Regex'])) {
+            @if (task.success) {
+              <span>The Regex matches the output string.</span>
+            } @else {
+              <span>The Regex does not match the output string.</span>
+            }
+          }
+          @if (isOfReturnType(task, ['Return_Code'])) {
+            @if (task.success) {
+              <span>Returned Code matches the expected Code</span>
+            } @else {
+              <span> Returned Code does not match the expected Code </span>
+            }
+          }
+          @if (isOfReturnType(task, ['Return_Text'])) {
+            @if (task.success) {
+              <span>Returned Text matches the expected Text</span>
+            } @else {
+              <span> Returned Text does not match the expected Text </span>
+            }
+          }
+          @if (isOfReturnType(task, ['Return_Code_And_Text'])) {
+            @if (task.success) {
+              <span>
+                Returned Text and Code match the expected Text and Code
+              </span>
+            } @else {
+              <span>
+                Either returned Text, Returned Code or both do not match the
+                expected Text and Code
+              </span>
+            }
+          }
+        </li>
+      }
+    </ul>
+  }
 </details>