title: How to display a dynamic nested list of checkboxes in Angular template?
body: <p>I have a list of codes that comes from the API. Each code can be any of the given 6 types. These 6 types are also coming from API.</p>
  
  <p><code>types</code> object[]:</p>
  
  <pre><code>0: {typeName: "Type 1", id: 1}
  1: {typeName: "Type 2", id: 2}
  2: {typeName: "Type 3", id: 3}
  3: {typeName: "Type 4", id: 4}
  4: {typeName: "Type 5", id: 5}
  5: {typeName: "Type 6", id: 6}
  </code></pre>
  
  <p><code>allCodes</code> object[]:</p>
  
  <pre><code>0: {codeName: "code1", id: 1, codeTypeId: 1}
  1: {codeName: "code2", id: 2, codeTypeId: 5}
  2: {codeName: "code3", id: 3, codeTypeId: 2}
  3: {codeName: "code4", id: 4, codeTypeId: 3}
  4: {codeName: "code5", id: 5, codeTypeId: 4}
  5: {codeName: "code6", id: 6, codeTypeId: 4}
  6: {codeName: "code7", id: 4, codeTypeId: 3}
  </code></pre>
  
  <p>Here <code>codeTypeId</code> is the <code>id</code> from <code>types</code> object. In the template I want to display a set of checkboxes in the form like:</p>
  
  <pre><code>&lt;h3&gt;Type 1&lt;/h3&gt;
  &lt;input type="checkbox"&gt;code1
  
  &lt;h3&gt;Type 2&lt;/h3&gt;
  &lt;input type="checkbox"&gt;code3
  
  &lt;h3&gt;Type 3&lt;/h3&gt;
  &lt;input type="checkbox"&gt;code4
  &lt;input type="checkbox"&gt;code7
  
  &lt;h3&gt;Type 4&lt;/h3&gt;
  &lt;input type="checkbox"&gt;code5
  &lt;input type="checkbox"&gt;code6
  
  &lt;h3&gt;Type 5&lt;/h3&gt;
  &lt;input type="checkbox"&gt;code2
  
  &lt;h3&gt;Type 6 &lt;/h3&gt;
  -- No code added --
  </code></pre>
  
  <p>This is what I have so far:</p>
  
  <p>In my controller:</p>
  
  <pre><code>ngOnInit() {
      this.codesForm = this.createFormGroup();
      this.addCheckboxes();
  }
  
  createFormGroup() {
      return this.fb.group({
          codes: new FormArray([])
      });
  }
  
  private addCheckboxes() {
  
      this.allCodes.forEach((o) =&gt; {
          this.isMatch = this.checkedCodes.some((el) =&gt; {
              return el.id === o.id;
          });
  
          (this.codesForm.controls.codes as FormArray).push(new FormControl(this.isMatch));
      });
  }
  </code></pre>
  
  <p>In my template:</p>
  
  <pre><code>&lt;form [formGroup]="codesForm" (ngSubmit)="onSubmit()"&gt;
      &lt;div class="custom-control custom-checkbox mb-1" formArrayName="codes"
          *ngFor="let code of codesForm.controls.codes.controls; let i = index"&gt;
          &lt;input type="checkbox" class="custom-control-input" id="{{i}}" [formControlName]="i"&gt;
          &lt;label class="custom-control-label" for="{{i}}"&gt;{{allCodes[i].codeName}}&lt;/label&gt;
      &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>But the above code displays all the checkboxes in one single list, like this:</p>
  
  <pre><code>&lt;input type="checkbox"&gt;code1
  &lt;input type="checkbox"&gt;code2
  &lt;input type="checkbox"&gt;code3
  &lt;input type="checkbox"&gt;code4
  &lt;input type="checkbox"&gt;code5
  &lt;input type="checkbox"&gt;code6
  &lt;input type="checkbox"&gt;code7
  </code></pre>
  
  <p>How do I group them under their respective types? I tried creating nested <code>FormArray</code> controls, but that didn't work.</p>