Q:

div toggle show/hide for parent and child relation ship in angular 6

I have list of values in div with parent and child relation ship. When I toggle any specific parent record, all the child records associated with other parents also gets opened. I bind this div from service (API)
Please find the sample code used for the above function
 <div class="table rts-table-parentChild" *ngFor="let  userRole of userRoleActions; let i = index">
<div class="table-row table-header">
    <div class="table-cell">
        <span *ngIf="userRole.userRoleSubActions.length" id="section{{userRole.actionName}}"
        class="margin-right-5 fa fa-plus-circle" role="button"
        tabindex="0" [ngClass]="[clickPlus === false ? 'fa fa-plus-circle' : 'fa fa-minus-circle']"  (click)="clickPlus=!clickPlus"></span>
        {{userRole.actionName}}
    </div>
    <div class="table-cell">
        <input type="checkbox" [ngModelOptions]="{standalone: true}" class="setup-checkbox"    id="ChekCreate{{userRole.actionName}}" [(ngModel)]="userRole.isCreateChecked"
        (click)="selectParentRole(i,'create')">
    </div>
   <div class="table-cell">
        <input type="checkbox"[ngModelOptions]="{standalone: true}" class="setup-checkbox" id="ChekDelete{{userRole.actionName}}" [(ngModel)]="userRole.isDeleteChecked"
        (click)="selectParentRole(i,'delete')">
    </div>
</div>

<ng-container *ngIf="clickPlus">
<div style="display:table-row-group;" *ngFor="let item of userRole.userRoleSubActions; let j = index">
  <div class="table-row ">
    <div class="table-cell" class="subj"> {{item.actionName}}</div>
        <div class="table-cell">
        <input type="checkbox" [ngModelOptions]="{standalone: true}" class="setup-checkbox"
            [(ngModel)]="item.isCreateChecked" (change)="isCreateChecked(i,'create')">
        </div>
        <div class="table-cell">
            <input type="checkbox" [ngModelOptions]="{standalone: true}" class="setup-checkbox"
            [(ngModel)]="item.isDeleteChecked" (change)="isCreateChecked(i,'delete')">
        </div>
    </div>
</div>
</ng-container>

A:

Hi because are toggle on variable  clickPlus That's why specific parent record,  all parent record is  togged.  So  you have to add 
show:boolen 

in model of userRoleActions and in click event you can toggle like 
(click)="userRole.show=!userRole.show"

Hope you understand my point may this  will  help  you.

