Angular 8 Nested Object Interpolation

Question

This is my version of Angular CLI:

Angular CLI: 7.3.9
Node: 12.2.0
OS: win32 x64
Angular: 8.0.2

While making an Angular 8 application, I am trying to use nested FormGroups which correspond to the following object:

const Boilerplate: any = {
    1: {
        desc: "section1",
        content: {
            1: "question 1.a:",
            2: "question 1.b:",
            3: "question 1.c"
        }
    },
    2: {
        desc: "section2",
        content: {
            4: "question 2.a:",
            5: "question 2.b:",
            6: "question 2.c",
            7: "question 2.d"
        }
    }
}

There is an inner FormGroup of FormControls for section 1 and section 2, and an outer FormGroup holding the two inner formgroups. This is defined in the component.ts.

In the component.html, I am trying to iterate through the outer FormGroup's inner FormGroups, and print the inner FormControls. This is the code I have so far:

<form [formGroup]="sectionGroup">
   <div *ngIf="boilerplate">
       <div *ngFor="let section of boilerplate | keyvalue">
           {{ boilerplate[section.key].desc }}

           <div formGroupName="{{section.key}}">
               <div *ngFor="let question of boilerplate[{{section.key}}]">
                   <-- things -->
               </div>
           </div>
       </div>
   </div>

The line <div *ngFor="let question of boilerplate[{{section.key}}]"> fails with an error message of:

Unexpected token {, expected identifier, keyword, or string

I have tried the following solutions, none of which have worked for me:

<div *ngFor="let question of {{boilerplate}}.{{section.key}}">

<div *ngFor="let question of {{boilerplate[section.key]}}">

<div *ngFor="let question of {{boilerplate[{{section.key}}]}}">

<td *ngFor="let question of Section">{{boilerplate[[section.key]]}}</td>

I have tried a variety of other {} and [] combinations and orders, and I realize now that nested interpolation is non-parsable.

Does anyone have a suggestion of how I can achieve this? I am using nested FormGroups because it is possible I will have additional layers of sections in the future. The format of the Boilerplate object can be changed if it would make the problem solvable (because I defined it, myself).

EDIT

The following was the solution that resolved this issue:

<div *ngFor="let question of boilerplate[section.key].content | keyvalue">
    {{question.value}}
</div>

Answer 1

I try like below,

<div [formGroup]="formGroup">
<div *ngIf="boilerplate">
<div *ngFor="let section of boilerplate | keyvalue">
      {{ boilerplate[section.key].desc }}
  <div>
    <div *ngFor="let question of boilerplate[section.key].content | keyvalue">
      {{ question | json }}
    </div>
  </div>
</div>

Output is like below,

section1
{ "key": "1", "value": "question 1.a:" }
{ "key": "2", "value": "question 1.b:" }
{ "key": "3", "value": "question 1.c" }
section2
{ "key": "4", "value": "question 2.a:" }
{ "key": "5", "value": "question 2.b:" }
{ "key": "6", "value": "question 2.c" }
{ "key": "7", "value": "question 2.d" }

Answer 2

You need to use a keyValue filter pipe then you could just have the following syntax, this will let you use ngFor* to iterate though objects rather than arrays.

<div *ngFor="let question of boilerplate | keyValue">
    {{ question.key }} - {{ question.value }}
</div>

You can then do the same for the nested objects inside until you have the correct data displayed. This is not supported in all versions of Angular, but definitely fine in 8.

Where you have Objects with the key as a number, I would look to manipulate that into an array which would help you keep this a little more simple. Allowing you to use traditional *ngFor