Why is FormArray not assignable to NgIterable<any>?

Issue

I tried to pass a FormArray into a component. This component template iterates over FormArray and displays data. It allows the user to add to the array or remove items.

ChildComponent ts

@Input()
public formArray!:FormArray;

Then in the template I try:

<div class="formRow child2" *ngFor="let year of formArray; let i=index">
  List Number #{{i+1}} &nbsp; &nbsp;
  <mat-form-field class="col3 no-bottom" appearance="fill">
    <mat-label>{{ "YEAR" | translate }}</mat-label>
    <input matInput placeholder="Year" mask="0000" [formControl]="year">
  </mat-form-field>
    <button mat-flat-button color="accent" (click)="addYear()">
      <span class="material-icons">Add Year</button>

However, I get an error message:

Type 'FormArray' is not assignable to type 'NgIterable<any> | null | undefined'.
<div class="formRow child2" *ngFor="let year of formArray; let i=index">

Can anyone explain why this is happening? Highly appreciate it.

Solution

It should be

*ngFor="let year of formArray.controls;

formArray.controls is iterable

See working demo here

Answered By - Shyam Joshi