refactor: use built-in control flow in js-web-frameworks benchmark (angular#55988)

pkozlowski-opensource · pkozlowski-opensource · commit b94adb9fc70e · 2024-05-23T14:09:38.000+02:00
Migrate the js-web-frameworks benchmark to use the built-in control flow instead of the ngFor loop. PR Close angular#55988
diff --git a/modules/benchmarks/src/js-web-frameworks/ng2/rows.ts b/modules/benchmarks/src/js-web-frameworks/ng2/rows.ts
@@ -19,18 +19,20 @@ export interface RowData {
   template: `
     <table class="table table-hover table-striped test-data">
       <tbody>
-        <tr [class.danger]="item.id === selected" *ngFor="let item of data; trackBy: itemById">
-          <td class="col-md-1">{{ item.id }}</td>
-          <td class="col-md-4">
-            <a href="#" (click)="select(item.id); $event.preventDefault()">{{ item.label }}</a>
-          </td>
-          <td class="col-md-1">
-            <a href="#" (click)="delete(item.id); $event.preventDefault()">
-              <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
-            </a>
-          </td>
-          <td class="col-md-6"></td>
-        </tr>
+        @for(item of data; track item.id) {
+          <tr [class.danger]="item.id === selected">
+            <td class="col-md-1">{{ item.id }}</td>
+            <td class="col-md-4">
+              <a href="#" (click)="select(item.id); $event.preventDefault()">{{ item.label }}</a>
+            </td>
+            <td class="col-md-1">
+              <a href="#" (click)="delete(item.id); $event.preventDefault()">
+                <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
+              </a>
+            </td>
+            <td class="col-md-6"></td>
+          </tr>
+        }
       </tbody>
     </table>
   `,
@@ -41,10 +43,6 @@ export class JsWebFrameworksComponent {
 
   constructor(private _appRef: ApplicationRef) {}
 
-  itemById(index: number, item: RowData) {
-    return item.id;
-  }
-
   select(itemId: number) {
     this.selected = itemId;
     this._appRef.tick();
