convert to built-in conditionals and loops from directives

jasontaylordev · Nov 18, 2024 · ff8616b · ff8616b
1 parent f25497c
commit ff8616b
Show file tree

Hide file tree

Showing 2 changed files with 63 additions and 32 deletions.
diff --git a/src/Web/ClientApp/src/app/fetch-data/fetch-data.component.html b/src/Web/ClientApp/src/app/fetch-data/fetch-data.component.html
@@ -1,10 +1,11 @@
 <h1 id="tableLabel">Weather forecast</h1>
 
 <p>This component demonstrates fetching data from the server.</p>
-
-<p *ngIf="!forecasts?.length"><em>Loading...</em></p>
-
-<table class='table table-striped' aria-labelledby="tableLabel" *ngIf="forecasts.length">
+@if (!forecasts?.length) {
+<p><em>Loading...</em></p>
+}
+@else{
+<table class='table table-striped' aria-labelledby="tableLabel">
   <thead>
     <tr>
       <th>Date</th>
@@ -14,11 +15,14 @@ <h1 id="tableLabel">Weather forecast</h1>
     </tr>
   </thead>
   <tbody>
-    <tr *ngFor="let forecast of forecasts">
+    @for (forecast of forecasts; track $index) {
+    <tr>
       <td>{{ forecast.date | date }}</td>
       <td>{{ forecast.temperatureC }}</td>
       <td>{{ forecast.temperatureF }}</td>
       <td>{{ forecast.summary }}</td>
     </tr>
+    }
   </tbody>
 </table>
+}
diff --git a/src/Web/ClientApp/src/app/todo/todo.component.html b/src/Web/ClientApp/src/app/todo/todo.component.html
@@ -1,23 +1,22 @@
 <h1>Todo</h1>
 
 <p>This is a complex todo list component.</p>
-
-<p *ngIf="!lists"><em>Loading...</em></p>
-
-<div *ngIf="lists">
-
+@if(!lists){
+<p><em>Loading...</em></p>
+}
+@else{
+<div>
   <div class="row">
     <div class="col-sm-4">
       <div class="clearfix">
         <h2 class="float-start">Lists</h2>
-        <button class="btn btn-default float-end" title="New List..."
-          (click)="showNewListModal(newListModalTemplate)">
+        <button class="btn btn-default float-end" title="New List..." (click)="showNewListModal(newListModalTemplate)">
           <i class="bi bi-journal-plus"></i>
         </button>
       </div>
       <ul class="list-group">
-        <li *ngFor="let list of lists; index as i" class="list-group-item"
-          [ngClass]="{ 'active': selectedList == list }" (click)="selectedList = list">
+        @for (list of lists; track $index; let i = $index) {
+        <li class="list-group-item" [ngClass]="{ 'active': selectedList == list }" (click)="selectedList = list">
           <div class="clearfix">
             <div class="float-start">
               {{ list.title }}
@@ -27,9 +26,11 @@ <h2 class="float-start">Lists</h2>
             </div>
           </div>
         </li>
+        }
       </ul>
     </div>
-    <div class="col-sm-8" *ngIf="selectedList">
+    @if (selectedList) {
+    <div class="col-sm-8">
       <div class="clearfix">
         <h2 class="float-start">{{ selectedList.title }}</h2>
         <button id="listOptions" class="btn btn-default float-end" title="List Options..."
@@ -38,39 +39,50 @@ <h2 class="float-start">{{ selectedList.title }}</h2>
         </button>
       </div>
       <ul id="todo-items" class="list-group mb-2">
-        <li class="list-group-item" *ngFor="let item of selectedList.items; index as i">
+        @for (item of selectedList.items; track $index;let i = $index) {
+        <li class="list-group-item">
           <div class="d-flex">
             <div class="todo-item-checkbox">
               <input type="checkbox" [(ngModel)]="item.done" (change)="updateItem(item)" />
             </div>
             <div class="flex-fill">
-              <input id="{{ 'itemTitle' + i }}" *ngIf="item == selectedItem" type="text"
-                class="form-control item-input-control" [(ngModel)]="item.title" (keyup.enter)="updateItem(item, true)"
-                (blur)="updateItem(item)" autofocus="autofocus" maxlength="200" />
-              <div class="todo-item-title" *ngIf="item != selectedItem" [ngClass]="{ 'done-todo': item.done }"
+              @if(item == selectedItem){
+              <input id="{{ 'itemTitle' + i }}" type="text" class="form-control item-input-control"
+                [(ngModel)]="item.title" (keyup.enter)="updateItem(item, true)" (blur)="updateItem(item)"
+                autofocus="autofocus" maxlength="200" />
+              }
+              @else {
+              <div class="todo-item-title" [ngClass]="{ 'done-todo': item.done }"
                 (click)="editItem(item, 'itemTitle' + i)" class="form-control item-input-control">
                 <span>{{ item.title }}</span>
               </div>
+              }
             </div>
             <div class="todo-item-commands">
-              <button *ngIf="item.id != 0" (click)="showItemDetailsModal(itemDetailsModalTemplate, item)"
-                class="btn btn-default btn-xs" role="button">
+              @if(item.id != 0){
+              <button (click)="showItemDetailsModal(itemDetailsModalTemplate, item)" class="btn btn-default btn-xs"
+                role="button">
                 <i class="bi bi-three-dots-vertical"></i>
               </button>
+              }
             </div>
           </div>
         </li>
+        }
         <li class="list-group-item" (click)="addItem()">
           <button class="btn btn-default">Add Item...</button>
         </li>
       </ul>
     </div>
+    }
   </div>
 </div>
-
-<div *ngIf="debug">
+}
+@if(debug){
+<div>
   <pre>{{ lists | json }}</pre>
 </div>
+}
 
 <ng-template #listOptionsModalTemplate>
   <div class="modal-header">
@@ -85,9 +97,11 @@ <h4 class="modal-title pull-left">List Options</h4>
       <input type="text" class="form-control" id="inputListTitle" placeholder="List name..."
         [(ngModel)]="listOptionsEditor.title" (keyup.enter)="updateListOptions()" maxlength="200" />
     </div>
-    <div *ngIf="debug">
+    @if(debug){
+    <div>
       <pre>{{ listOptionsEditor | json }}</pre>
     </div>
+    }
   </div>
   <div class="modal-footer">
     <div class="clearfix">
@@ -114,23 +128,30 @@ <h4 class="modal-title pull-left">Item Details</h4>
       <div class="form-group">
         <label for="list">List</label>
         <select class="form-control" [(ngModel)]="itemDetailsEditor.listId">
-          <option [ngValue]="list.id" *ngFor="let list of lists">{{ list.title }}</option>
+          @for (list of lists; track $index) {
+          <option [ngValue]="list.id">{{ list.title }}</option>
+          }
         </select>
       </div>
       <div class="form-group">
         <label for="priority">Priority</label>
         <select class="form-control" [(ngModel)]="itemDetailsEditor.priority">
-          <option [ngValue]="level.id" *ngFor="let level of priorityLevels">{{ level.title }}</option>
+          @for (level of priorityLevels; track $index) {
+          <option [ngValue]="level.id">{{ level.title }}</option>
+          }
         </select>
       </div>
       <div class="form-group">
         <label for="note">Note</label>
         <textarea id="note" class="form-control" rows="3" [(ngModel)]="itemDetailsEditor.note"></textarea>
       </div>
     </div>
-    <div *ngIf="debug">
+
+    @if(debug){
+    <div>
       <pre>{{ itemDetailsEditor | json }}</pre>
     </div>
+    }
   </div>
   <div class="modal-footer">
     <div class="clearfix">
@@ -154,9 +175,11 @@ <h4 class="modal-title pull-left">Delete "{{ selectedList?.title }}"?</h4>
   </div>
   <div class="modal-body">
     <p>All items will be permanently deleted. </p>
-    <div *ngIf="debug">
+    @if(debug){
+    <div>
       <pre>{{ selectedList | json }}</pre>
     </div>
+    }
   </div>
   <div class="modal-footer clearfix">
     <div class="float-end">
@@ -178,18 +201,22 @@ <h4 class="modal-title pull-left">New List</h4>
       <label for="title">Title</label>
       <input type="text" class="form-control" id="title" placeholder="List title..." [(ngModel)]="newListEditor.title"
         [ngClass]="{ 'is-invalid': newListEditor.error }" (keyup.enter)="addList()" maxlength="200" />
-      <div *ngIf="newListEditor.error" class="invalid-feedback">
+      @if(newListEditor.error){
+      <div class="invalid-feedback">
         {{ newListEditor.error }}
       </div>
+      }
     </div>
-    <div *ngIf="debug">
+    @if (debug) {
+    <div>
       <pre>{{ newListEditor | json }}</pre>
     </div>
+    }
   </div>
   <div class="modal-footer clearfix">
     <div class="float-end">
       <button class="btn btn-default" (click)="newListCancelled()">Cancel</button>
       <button class="btn btn-primary" (click)="addList()">Create</button>
     </div>
   </div>
-</ng-template>
+</ng-template>