From 1f8491c1d290af39f7a5795478515d9688b5aa3e Mon Sep 17 00:00:00 2001
From: Adrien Crivelli <adrien.crivelli@gmail.com>
Date: Wed, 28 Feb 2024 18:21:16 +0800
Subject: [PATCH] Migrate to new control flow syntax (#1827)

Co-authored-by: Marco Santarelli <santam85@users.noreply.github.com>
---
 .../app/line-chart/line-chart.component.html  | 21 +++++++++++--------
 .../app/line-chart/line-chart.component.ts    |  4 ++--
 2 files changed, 14 insertions(+), 11 deletions(-)

diff --git a/apps/ng2-charts-demo/src/app/line-chart/line-chart.component.html b/apps/ng2-charts-demo/src/app/line-chart/line-chart.component.html
index 3b180d46..5366d726 100644
--- a/apps/ng2-charts-demo/src/app/line-chart/line-chart.component.html
+++ b/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()">
diff --git a/apps/ng2-charts-demo/src/app/line-chart/line-chart.component.ts b/apps/ng2-charts-demo/src/app/line-chart/line-chart.component.ts
index 272660db..9173c668 100644
--- a/apps/ng2-charts-demo/src/app/line-chart/line-chart.component.ts
+++ b/apps/ng2-charts-demo/src/app/line-chart/line-chart.component.ts
@@ -2,7 +2,7 @@ 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({
@@ -10,7 +10,7 @@ import { ChartHostComponent } from '../chart-host/chart-host.component';
   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';