How to bind json object to angular material form

Question

I'm currently making a simple form using angular framework with the json file given to me. Inside the json were some arrays and objects. Well, I successfully binded the json arrays. My problem now is I don't know how to do it with the json object. I cannot bind the columns stated in json file to my form, instead the number of columns was diplayed in the UI. I already tried using the ngFor but the error says ngFor only supports binding to iterables such as arrays. I'm actually new to angular and this angular material. Any help will be appreciated

Below is the form i am making. Numbers encircled in red supposed to be the columns.

This is the json file. json Object encircled in red was the column i want to bind in my form

This is my app.component.html. I do think this is where my mistake resides

this is what i mean for the columns. as you can see. item 1 and item 1A are in two columns. item 2 is only in one column

Answer 1

You don't need the colums field value. You can simply use display: flex for the <section> :

<section style="display:flex; justify-content: space-between;" class="section" *ngFor="let inputSection of inputs.sections">
    <div class="section-content" *ngFor="let field of inputSection.fields; let i = index;">
        [...]
    </div>
</section>