Migrate to new control flow syntax (#1827)

Co-authored-by: Marco Santarelli <[email protected]>

apps/ng2-charts-demo/src/app/line-chart/line-chart.component.html

@@ -9,16 +9,19 @@
   ></canvas>
   <table>
     <tr>
-      <th *ngFor="let label of lineChartData.labels">{{ label }}</th>
-    </tr>
-    <tr
-      *ngFor="let d of lineChartData.datasets; let i = index"
-      [class]="'line-' + i"
-    >
-      <td *ngFor="let label of lineChartData.labels; let j = index">
-        {{ d && d.data[j] }}
-      </td>
+      @for (label of lineChartData.labels; track label) {
+        <th>{{ label }}</th>
+      }
     </tr>
+    @for (d of lineChartData.datasets; track d; let i = $index) {
+      <tr [class]="'line-' + i">
+        @for (label of lineChartData.labels; track label; let j = $index) {
+          <td>
+            {{ d && d.data[j] }}
+          </td>
+        }
+      </tr>
+    }
   </table>
   <div class="button-row">
     <button mat-button mat-raised-button color="primary" (click)="randomize()">

apps/ng2-charts-demo/src/app/line-chart/line-chart.component.ts

@@ -2,15 +2,15 @@ import { Component, ViewChild } from '@angular/core';
 import { ChartConfiguration, ChartEvent, ChartType } from 'chart.js';
 import { BaseChartDirective } from 'ng2-charts';
 import { MatButton } from '@angular/material/button';
-import { NgFor } from '@angular/common';
+
 import { ChartHostComponent } from '../chart-host/chart-host.component';
 
 @Component({
   selector: 'app-line-chart',
   templateUrl: './line-chart.component.html',
   styleUrls: ['./line-chart.component.scss'],
   standalone: true,
-  imports: [NgFor, MatButton, BaseChartDirective, ChartHostComponent],
+  imports: [MatButton, BaseChartDirective, ChartHostComponent],
 })
 export class LineChartComponent {
   private newLabel? = 'New label';