From 61a0fd5473903f9361011602d8e2ec07c449079f Mon Sep 17 00:00:00 2001
From: Daniel Kimmich <json-derulo@users.noreply.github.com>
Date: Sat, 18 Nov 2023 09:52:56 +0100
Subject: [PATCH] refactor: migrate to built-in control flow

---
 .eslintrc.json                                       |  4 +++-
 .../src/app/pipes/country/country.component.html     | 12 ++++++------
 .../src/app/pipes/country/country.component.ts       |  2 --
 .../src/app/pipes/currency/currency.component.html   | 12 ++++++------
 .../src/app/pipes/currency/currency.component.ts     |  2 --
 .../src/app/pipes/date/date.component.html           |  6 +++---
 .../src/app/pipes/date/date.component.ts             |  2 --
 .../src/app/pipes/decimal/decimal.component.html     |  6 +++---
 .../src/app/pipes/decimal/decimal.component.ts       |  2 --
 .../src/app/pipes/language/language.component.html   | 12 ++++++------
 .../src/app/pipes/language/language.component.ts     |  2 --
 .../src/app/pipes/list/list.component.html           | 12 ++++++------
 .../src/app/pipes/list/list.component.ts             |  2 --
 .../src/app/pipes/percent/percent.component.html     |  6 +++---
 .../src/app/pipes/percent/percent.component.ts       |  2 --
 .../pipes/relative-time/relative-time.component.html |  6 +++---
 .../pipes/relative-time/relative-time.component.ts   |  2 --
 .../src/app/pipes/unit/unit.component.html           | 12 ++++++------
 .../src/app/pipes/unit/unit.component.ts             |  2 --
 19 files changed, 45 insertions(+), 61 deletions(-)

diff --git a/.eslintrc.json b/.eslintrc.json
index 0fe02128..c3906966 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -31,7 +31,9 @@
     {
       "files": "*.html",
       "extends": ["plugin:@angular-eslint/template/recommended"],
-      "rules": {}
+      "rules": {
+        "@angular-eslint/template/prefer-control-flow": "error"
+      }
     }
   ]
 }
diff --git a/projects/angular-intl-demo/src/app/pipes/country/country.component.html b/projects/angular-intl-demo/src/app/pipes/country/country.component.html
index b47c3352..3dc01732 100644
--- a/projects/angular-intl-demo/src/app/pipes/country/country.component.html
+++ b/projects/angular-intl-demo/src/app/pipes/country/country.component.html
@@ -2,9 +2,9 @@
   <mat-form-field>
     <mat-label>Country to transform</mat-label>
     <mat-select [(ngModel)]="selectedCountry">
-      <mat-option *ngFor="let country of countries" [value]="country">{{
-        country
-      }}</mat-option>
+      @for (country of countries; track country) {
+        <mat-option [value]="country">{{ country }}</mat-option>
+      }
     </mat-select>
   </mat-form-field>
 
@@ -12,9 +12,9 @@
     <mat-label>Locale</mat-label>
     <mat-select [(ngModel)]="locale">
       <mat-option [value]="undefined">Browser default</mat-option>
-      <mat-option *ngFor="let language of languages" [value]="language">{{
-        language
-      }}</mat-option>
+      @for (language of languages; track language) {
+        <mat-option [value]="language">{{ language }}</mat-option>
+      }
     </mat-select>
   </mat-form-field>
 </div>
diff --git a/projects/angular-intl-demo/src/app/pipes/country/country.component.ts b/projects/angular-intl-demo/src/app/pipes/country/country.component.ts
index e0854313..c1cec700 100644
--- a/projects/angular-intl-demo/src/app/pipes/country/country.component.ts
+++ b/projects/angular-intl-demo/src/app/pipes/country/country.component.ts
@@ -1,4 +1,3 @@
-import { NgFor } from '@angular/common';
 import { Component } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { MatOptionModule } from '@angular/material/core';
@@ -17,7 +16,6 @@ import { countries } from './countries';
     MatFormFieldModule,
     MatSelectModule,
     FormsModule,
-    NgFor,
     MatOptionModule,
     IntlCountryPipe,
   ],
diff --git a/projects/angular-intl-demo/src/app/pipes/currency/currency.component.html b/projects/angular-intl-demo/src/app/pipes/currency/currency.component.html
index 520ab8cc..8c4f5a98 100644
--- a/projects/angular-intl-demo/src/app/pipes/currency/currency.component.html
+++ b/projects/angular-intl-demo/src/app/pipes/currency/currency.component.html
@@ -7,9 +7,9 @@
   <mat-form-field>
     <mat-label>Currency</mat-label>
     <mat-select [(ngModel)]="currency">
-      <mat-option *ngFor="let currency of currencies" [value]="currency">{{
-        currency
-      }}</mat-option>
+      @for (currency of currencies; track currency) {
+        <mat-option [value]="currency">{{ currency }}</mat-option>
+      }
     </mat-select>
   </mat-form-field>
 
@@ -17,9 +17,9 @@
     <mat-label>Locale</mat-label>
     <mat-select [(ngModel)]="locale">
       <mat-option [value]="undefined">Browser default</mat-option>
-      <mat-option *ngFor="let language of languages" [value]="language">{{
-        language
-      }}</mat-option>
+      @for (language of languages; track language) {
+        <mat-option [value]="language">{{ language }}</mat-option>
+      }
     </mat-select>
   </mat-form-field>
 
diff --git a/projects/angular-intl-demo/src/app/pipes/currency/currency.component.ts b/projects/angular-intl-demo/src/app/pipes/currency/currency.component.ts
index 9cae5ada..1e892124 100644
--- a/projects/angular-intl-demo/src/app/pipes/currency/currency.component.ts
+++ b/projects/angular-intl-demo/src/app/pipes/currency/currency.component.ts
@@ -1,4 +1,3 @@
-import { NgFor } from '@angular/common';
 import { Component } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { MatOptionModule } from '@angular/material/core';
@@ -19,7 +18,6 @@ import { currencies } from './currencies';
     MatInputModule,
     FormsModule,
     MatSelectModule,
-    NgFor,
     MatOptionModule,
     IntlCurrencyPipe,
   ],
diff --git a/projects/angular-intl-demo/src/app/pipes/date/date.component.html b/projects/angular-intl-demo/src/app/pipes/date/date.component.html
index dfa082a8..cde1e49b 100644
--- a/projects/angular-intl-demo/src/app/pipes/date/date.component.html
+++ b/projects/angular-intl-demo/src/app/pipes/date/date.component.html
@@ -17,9 +17,9 @@
     <mat-label>Locale</mat-label>
     <mat-select [(ngModel)]="locale">
       <mat-option [value]="undefined">Browser default</mat-option>
-      <mat-option *ngFor="let language of languages" [value]="language">{{
-        language
-      }}</mat-option>
+      @for (language of languages; track language) {
+        <mat-option [value]="language">{{ language }}</mat-option>
+      }
     </mat-select>
   </mat-form-field>
 
diff --git a/projects/angular-intl-demo/src/app/pipes/date/date.component.ts b/projects/angular-intl-demo/src/app/pipes/date/date.component.ts
index 33efe9bb..ac0f7213 100644
--- a/projects/angular-intl-demo/src/app/pipes/date/date.component.ts
+++ b/projects/angular-intl-demo/src/app/pipes/date/date.component.ts
@@ -1,4 +1,3 @@
-import { NgFor } from '@angular/common';
 import { Component } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
@@ -24,7 +23,6 @@ import { getDateString } from '../date-utils';
     MatIconModule,
     MatSelectModule,
     MatOptionModule,
-    NgFor,
     IntlDatePipe,
   ],
 })
diff --git a/projects/angular-intl-demo/src/app/pipes/decimal/decimal.component.html b/projects/angular-intl-demo/src/app/pipes/decimal/decimal.component.html
index b6943238..2bd38806 100644
--- a/projects/angular-intl-demo/src/app/pipes/decimal/decimal.component.html
+++ b/projects/angular-intl-demo/src/app/pipes/decimal/decimal.component.html
@@ -8,9 +8,9 @@
     <mat-label>Locale</mat-label>
     <mat-select [(ngModel)]="locale">
       <mat-option [value]="undefined">Browser default</mat-option>
-      <mat-option *ngFor="let language of languages" [value]="language">{{
-        language
-      }}</mat-option>
+      @for (language of languages; track language) {
+        <mat-option [value]="language">{{ language }}</mat-option>
+      }
     </mat-select>
   </mat-form-field>
 
diff --git a/projects/angular-intl-demo/src/app/pipes/decimal/decimal.component.ts b/projects/angular-intl-demo/src/app/pipes/decimal/decimal.component.ts
index d67008ee..24fc865e 100644
--- a/projects/angular-intl-demo/src/app/pipes/decimal/decimal.component.ts
+++ b/projects/angular-intl-demo/src/app/pipes/decimal/decimal.component.ts
@@ -1,4 +1,3 @@
-import { NgFor } from '@angular/common';
 import { Component } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { MatOptionModule } from '@angular/material/core';
@@ -19,7 +18,6 @@ import { languages } from '../../languages';
     FormsModule,
     MatSelectModule,
     MatOptionModule,
-    NgFor,
     IntlDecimalPipe,
   ],
 })
diff --git a/projects/angular-intl-demo/src/app/pipes/language/language.component.html b/projects/angular-intl-demo/src/app/pipes/language/language.component.html
index 1548943a..8973e068 100644
--- a/projects/angular-intl-demo/src/app/pipes/language/language.component.html
+++ b/projects/angular-intl-demo/src/app/pipes/language/language.component.html
@@ -2,9 +2,9 @@
   <mat-form-field>
     <mat-label>Language to transform</mat-label>
     <mat-select [(ngModel)]="selectedLanguage">
-      <mat-option *ngFor="let language of languages" [value]="language">{{
-        language
-      }}</mat-option>
+      @for (language of languages; track language) {
+        <mat-option [value]="language">{{ language }}</mat-option>
+      }
     </mat-select>
   </mat-form-field>
 
@@ -12,9 +12,9 @@
     <mat-label>Locale</mat-label>
     <mat-select [(ngModel)]="locale">
       <mat-option [value]="undefined">Browser default</mat-option>
-      <mat-option *ngFor="let language of languages" [value]="language">{{
-        language
-      }}</mat-option>
+      @for (language of languages; track language) {
+        <mat-option [value]="language">{{ language }}</mat-option>
+      }
     </mat-select>
   </mat-form-field>
 
diff --git a/projects/angular-intl-demo/src/app/pipes/language/language.component.ts b/projects/angular-intl-demo/src/app/pipes/language/language.component.ts
index d5c13ccd..e1895094 100644
--- a/projects/angular-intl-demo/src/app/pipes/language/language.component.ts
+++ b/projects/angular-intl-demo/src/app/pipes/language/language.component.ts
@@ -1,4 +1,3 @@
-import { NgFor } from '@angular/common';
 import { Component } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { MatOptionModule } from '@angular/material/core';
@@ -19,7 +18,6 @@ import { languages } from '../../languages';
     MatFormFieldModule,
     MatSelectModule,
     FormsModule,
-    NgFor,
     MatOptionModule,
     IntlLanguagePipe,
   ],
diff --git a/projects/angular-intl-demo/src/app/pipes/list/list.component.html b/projects/angular-intl-demo/src/app/pipes/list/list.component.html
index 662d96e4..d41abdab 100644
--- a/projects/angular-intl-demo/src/app/pipes/list/list.component.html
+++ b/projects/angular-intl-demo/src/app/pipes/list/list.component.html
@@ -2,9 +2,9 @@
   <mat-form-field>
     <mat-label>List items</mat-label>
     <mat-select [(ngModel)]="selectedItems" multiple>
-      <mat-option *ngFor="let item of list" [value]="item">{{
-        item
-      }}</mat-option>
+      @for (item of list; track item) {
+        <mat-option [value]="item">{{ item }}</mat-option>
+      }
     </mat-select>
   </mat-form-field>
 
@@ -12,9 +12,9 @@
     <mat-label>Locale</mat-label>
     <mat-select [(ngModel)]="locale">
       <mat-option [value]="undefined">Browser default</mat-option>
-      <mat-option *ngFor="let language of languages" [value]="language">{{
-        language
-      }}</mat-option>
+      @for (language of languages; track language) {
+        <mat-option [value]="language">{{ language }}</mat-option>
+      }
     </mat-select>
   </mat-form-field>
 
diff --git a/projects/angular-intl-demo/src/app/pipes/list/list.component.ts b/projects/angular-intl-demo/src/app/pipes/list/list.component.ts
index 697545b9..85fec54d 100644
--- a/projects/angular-intl-demo/src/app/pipes/list/list.component.ts
+++ b/projects/angular-intl-demo/src/app/pipes/list/list.component.ts
@@ -1,4 +1,3 @@
-import { NgFor } from '@angular/common';
 import { Component } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { MatOptionModule } from '@angular/material/core';
@@ -18,7 +17,6 @@ import { list } from './list';
     MatFormFieldModule,
     MatSelectModule,
     FormsModule,
-    NgFor,
     MatOptionModule,
     IntlListPipe,
   ],
diff --git a/projects/angular-intl-demo/src/app/pipes/percent/percent.component.html b/projects/angular-intl-demo/src/app/pipes/percent/percent.component.html
index 8c199ec4..f8897fa6 100644
--- a/projects/angular-intl-demo/src/app/pipes/percent/percent.component.html
+++ b/projects/angular-intl-demo/src/app/pipes/percent/percent.component.html
@@ -8,9 +8,9 @@
     <mat-label>Locale</mat-label>
     <mat-select [(ngModel)]="locale">
       <mat-option [value]="undefined">Browser default</mat-option>
-      <mat-option *ngFor="let language of languages" [value]="language">{{
-        language
-      }}</mat-option>
+      @for (language of languages; track language) {
+        <mat-option [value]="language">{{ language }}</mat-option>
+      }
     </mat-select>
   </mat-form-field>
 
diff --git a/projects/angular-intl-demo/src/app/pipes/percent/percent.component.ts b/projects/angular-intl-demo/src/app/pipes/percent/percent.component.ts
index 6362bc64..2715807a 100644
--- a/projects/angular-intl-demo/src/app/pipes/percent/percent.component.ts
+++ b/projects/angular-intl-demo/src/app/pipes/percent/percent.component.ts
@@ -1,4 +1,3 @@
-import { NgFor } from '@angular/common';
 import { Component } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { MatOptionModule } from '@angular/material/core';
@@ -19,7 +18,6 @@ import { languages } from '../../languages';
     FormsModule,
     MatSelectModule,
     MatOptionModule,
-    NgFor,
     IntlPercentPipe,
   ],
 })
diff --git a/projects/angular-intl-demo/src/app/pipes/relative-time/relative-time.component.html b/projects/angular-intl-demo/src/app/pipes/relative-time/relative-time.component.html
index 1c2d651d..9621e5f6 100644
--- a/projects/angular-intl-demo/src/app/pipes/relative-time/relative-time.component.html
+++ b/projects/angular-intl-demo/src/app/pipes/relative-time/relative-time.component.html
@@ -17,9 +17,9 @@
     <mat-label>Locale</mat-label>
     <mat-select [(ngModel)]="locale">
       <mat-option [value]="undefined">Browser default</mat-option>
-      <mat-option *ngFor="let language of languages" [value]="language">{{
-        language
-      }}</mat-option>
+      @for (language of languages; track language) {
+        <mat-option [value]="language">{{ language }}</mat-option>
+      }
     </mat-select>
   </mat-form-field>
 
diff --git a/projects/angular-intl-demo/src/app/pipes/relative-time/relative-time.component.ts b/projects/angular-intl-demo/src/app/pipes/relative-time/relative-time.component.ts
index 788c25b2..66860b53 100644
--- a/projects/angular-intl-demo/src/app/pipes/relative-time/relative-time.component.ts
+++ b/projects/angular-intl-demo/src/app/pipes/relative-time/relative-time.component.ts
@@ -1,4 +1,3 @@
-import { NgFor } from '@angular/common';
 import { Component } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
@@ -25,7 +24,6 @@ import { getDateString } from '../date-utils';
     MatIconModule,
     MatSelectModule,
     MatOptionModule,
-    NgFor,
     IntlRelativeTimePipe,
   ],
 })
diff --git a/projects/angular-intl-demo/src/app/pipes/unit/unit.component.html b/projects/angular-intl-demo/src/app/pipes/unit/unit.component.html
index 1783a306..33440568 100644
--- a/projects/angular-intl-demo/src/app/pipes/unit/unit.component.html
+++ b/projects/angular-intl-demo/src/app/pipes/unit/unit.component.html
@@ -7,9 +7,9 @@
   <mat-form-field>
     <mat-label>Unit</mat-label>
     <mat-select [(ngModel)]="selectedUnit">
-      <mat-option *ngFor="let unit of units" [value]="unit">{{
-        unit
-      }}</mat-option>
+      @for (unit of units; track unit) {
+        <mat-option [value]="unit">{{ unit }}</mat-option>
+      }
     </mat-select>
   </mat-form-field>
 
@@ -17,9 +17,9 @@
     <mat-label>Locale</mat-label>
     <mat-select [(ngModel)]="locale">
       <mat-option [value]="undefined">Browser default</mat-option>
-      <mat-option *ngFor="let language of languages" [value]="language">{{
-        language
-      }}</mat-option>
+      @for (language of languages; track language) {
+        <mat-option [value]="language">{{ language }}</mat-option>
+      }
     </mat-select>
   </mat-form-field>
 
diff --git a/projects/angular-intl-demo/src/app/pipes/unit/unit.component.ts b/projects/angular-intl-demo/src/app/pipes/unit/unit.component.ts
index 90b3b31e..2bc6f6fa 100644
--- a/projects/angular-intl-demo/src/app/pipes/unit/unit.component.ts
+++ b/projects/angular-intl-demo/src/app/pipes/unit/unit.component.ts
@@ -1,4 +1,3 @@
-import { NgFor } from '@angular/common';
 import { Component } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { MatOptionModule } from '@angular/material/core';
@@ -19,7 +18,6 @@ import { units } from './units';
     MatInputModule,
     FormsModule,
     MatSelectModule,
-    NgFor,
     MatOptionModule,
     IntlUnitPipe,
   ],