Angular: Nested ngFor on array of objects with FormArray

Question

I have a problem with nested ngFor maybe I'm using it wrong, in the Home component I have an empty array of objects designInputs:{}[] = []; which I fill it by using a Reactive-form in another component,Each form is stored as an object in this array, the form is built using the FormArray so it's not fixed size form then each object has it's own length.

in the home component I am looping through that array of objects designInputs

<div *ngFor="let form of designInputs;let i = index"> //number of forms
 <h5 class="card-title" *ngFor="let input of form ;let j =index" > {{input [i]}}</h5> //number of inputs in each form
</div>

the first loop should be responsible for how many objects (forms filled), So to get the whole form object and the second loop is to get the values of the inputs saved from each form [each form (object) has different number of inputs.

Edit: in the other component I have the formArray named "newFiles" inside a form called "designForm" then to convert it to object I did that :

let inputsValues = {...this.designForm.get('newFiles').value};

After, I pass it to a service then to the home component so designInputs for example should look something like that :

[
{0:"input1Value",
 1:"input2Value"
},
{0:"input1Value",
 1:"input2Value",
 2:"input3Value"
}
]

So I can't initialize it previously because at the moment I don't know how many items each object will contain.

what is the wrong here and how to fix it ?

Answer 1

I found the solution that I was looking for,Using a built in Pipe called "|keyvalue"

<div *ngFor="let form of designInputs;let d = index">
    <h5 class="card-title" *ngFor="let input of form | keyvalue">{{input.value}}</h5>
</div>