Reactive form in angular with grouped check box panel

From a dynamic Json like below one

 [
    {
        "label": "General",
        "data": [
            {
                "title": "parameters.deviceInfo.name"
            },
            {
              "title": "assetAttributes.manufacturerLabel"
            }

        ]
    },
    {
        "label": "Associated Device",
        "data": [
            {
                "title": "assetAttributes.operationsLabel",
               
            },
            {
                "title": "assetAttributes.adapterIpAddress",
               
            }
        ]
    },
    {
        "label": "profile.identificationTabLabel",
        "data": [
            {
                "title": "assetAttributes.assetIdLabel"
                
            }
        ]
    },
    {
        "label": "profile.communicationTabLabel",
        "data": [
            {
                "title": "profile.networkGroupLabel",
            },
            {
                "title": "assetAttributes.gtwAddressLabel",
            }
        ]
    },
    {
        "label": "profile.locationTabLabel",
        "data": [
            {
                "title": "assetAttributes.latitudeLabel"
               
            },
            {
                "title": "assetAttributes.longitudeLabel"
                
            }
            
        ]
    },
    {
        "label": "profile.customersTabLabel",
        "data": [
            {
                "title": "assetAttributes.mRidLabel"
              
            },
            {
                "title": "assetAttributes.epsNameLabel"
            }
        ]
    }
]

want to create reactive form in angular with grouped check box panel with select all for each object. That means when user clicks general checkbox, all the items inside that panel should be checked. Also one select all for selecting all the panel elements in one click.

It can be done quite easily:

test.component.ts

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, FormArray } from '@angular/forms';

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.scss']
})
export class TestComponent implements OnInit {
  form: FormGroup;
  data = [
    {
      label: "General",
      data: [
        { title: "gen 1" },
        { title: "gen 2" }
      ]
    },
    {
      label: "Associated Device",
      data: [
        { title: "dev 1" },
        { title: "dev2" }
      ]
    },
    {
      label: "Identity",
      data: [
        { title: "id1" },
        { title: "id2" }
      ]
    },
    {
      label: "communication",
      data: [
        { title: "network group" },
        { title: "gwt address" }
      ]
    },
    {
      label: "location",
      data: [
        { title: "latitude" },
        { title: "longitude" }
      ]
    }
  ];

  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    this.form = this.fb.group({
      selectAllAll: false,
      groups: this.fb.array(this.data.map(group => this.createGroup(group)))
    });
  }

  createGroup(group) {
    return this.fb.group({
      label: group.label,
      selectAll: false,
      items: this.fb.array(group.data.map(item => this.fb.group({
        title: item.title,
        selected: false
      })))
    });
  }

  get groups() {
    return this.form.get('groups') as FormArray;
  }

  selectAllGroup(groupIndex: number) {
    const group = this.groups.at(groupIndex) as FormGroup;
    const selectAll = group.get('selectAll').value;
    const items = group.get('items') as FormArray;
    items.controls.forEach(control => control.get('selected').setValue(selectAll));
  }

  selectAllGroups() {
    const selectAll = this.form.get('selectAllAll').value;
    this.groups.controls.forEach(group => {
      group.get('selectAll').setValue(selectAll);
      const items = group.get('items') as FormArray;
      items.controls.forEach(control => control.get('selected').setValue(selectAll));
    });
  }
}

test.component.html

<form style="color: aliceblue; text-align: center;" [formGroup]="form">
    <div>
        <input type="checkbox" formControlName="selectAllAll" (change)="selectAllGroups()"> Select All
    </div>
    <div class="d-flex">
        <div formArrayName="groups" *ngFor="let group of groups.controls; let i = index">
            <div [formGroupName]="i">
                <input type="checkbox" formControlName="selectAll" (change)="selectAllGroup(i)"> {{ group.get('label').value
                }}
                <div formArrayName="items" *ngFor="let item of group.get('items').controls; let j = index">
                    <div [formGroupName]="j">
                        <input type="checkbox" formControlName="selected"> {{ item.get('title').value }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>

Now, if you select all, All checkboxes gets selected

And if you select a Tab header, General Tab options get selected