parent and child checkbox selection

I am working in a page to assig permissions to different roles so, I have a parents and child list for each section present in my nvbar. I am trying to do: When the user select a parent section, all the checkbox should be selected When the user select a parent section but, deselect one of the group should be deselect the parent When the user deselect a parent should be deselected all the childs checkbox.

I was trying with check attribute, change the state(true or false) Asigned one specific and dinamic id to check it but is not working for me. I am so confuse about how to implement it. If someone can help me I really will apreciated it

 <!-- Here will go the sections -->
                        <nz-collapse>
                          <nz-collapse-panel
                            *ngFor="let parent of this.userMngmtService.getNvBar() let i = index"
                            [nzHeader]="parent.Section"
                            [nzActive]="parent.is_active"
                            [nzExtra]="extraTpl"
                            [nzDisabled]="parent.disabled">
                            <p style="margin:0;">
                              <label class="checkbox-inline">
                                <input type="checkbox" [value]="parent.parentId" (change)="viewParentSelected($event, i)">View
                              </label>
                              <label class="checkbox-inline">
                                <input type="checkbox" value="">Edit
                              </label>
                              <label class="checkbox-inline">
                                <input type="checkbox" value="">Delete
                              </label>
                            </p>

                            <!-- SubSection -->
                            <nz-collapse>
                              <nz-collapse-panel
                                *ngFor="let child of this.userMngmtService.getNvBar()[i].Sub"
                                [nzHeader]="child.permission"
                                [nzActive]="child.is_active"
                                [nzExtra]="extraTpl"
                                [nzDisabled]="child.disabled"

                              >
                                <p style="margin:0;">
                                  <label class="checkbox-inline">
                                    <input type="checkbox" [value]="child.permission_id" (change)="viewChildSelected($event, i)" id="'checkedBox'+i">View
                                    <!-- <input type="checkbox" [value]="child.permission_id" (change)="viewChildSelected($event)" >View -->
                                  </label>
                                  <label class="checkbox-inline">
                                    <input type="checkbox" value="">Edit
                                  </label>
                                  <label class="checkbox-inline">
                                    <input type="checkbox" value="">Delete
                                  </label>
                                </p>
                              </nz-collapse-panel>
                            </nz-collapse>
                            <!-- SubSection End -->

                          </nz-collapse-panel>
                        </nz-collapse>