NgForOf replaced with native built-in control flow

Author: tomaszmrugalski

src/app/components/catalogs/catalogs.component.html

@@ -16,9 +16,9 @@
         <input matInput formControlName="constellation" type="text"
                [matAutocomplete]="constAuto">
         <mat-autocomplete #constAuto="matAutocomplete">
-          <mat-option *ngFor="let abbr of filteredConstellations$ | async" [value]="abbr">
-            {{ abbr }}
-          </mat-option>
+          @for (abbr of filteredConstellations$ | async; track abbr) {
+            <mat-option [value]="abbr">{{ abbr }}</mat-option>
+          }
         </mat-autocomplete>
       </mat-form-field>
 

src/app/components/catalogs/catalogs.component.ts

@@ -8,7 +8,7 @@ import { FormBuilder, FormGroup, FormsModule, ReactiveFormsModule } from '@angul
 import { trigger, state, style, transition, animate } from '@angular/animations';
 import { TopBarService } from '../../services/top-bar.service';
 import { MatTableModule } from '@angular/material/table';
-import { AsyncPipe, NgForOf } from '@angular/common';
+import { AsyncPipe } from '@angular/common';
 import { Observable } from 'rxjs';
 import { map, startWith } from 'rxjs/operators';
 
@@ -68,7 +68,6 @@ interface LoadObjectsParams {
     MatSelectModule,
     MatCheckboxModule,
     MatAutocompleteModule,
-    NgForOf,
     AsyncPipe,
     FormsModule,
     ReactiveFormsModule