tree table using normal html tree table- angular 2+

Question

I am trying for a tree table using normal html table.

{
"policy": [
    {
        "id": "a1",
        "name": "policy 1.1",
        "categories": [
            {
                "id": "c1",
                "name": "category 1.1",
                "subCategories": [
                    {
                        "id": "s1",
                        "name": "subCategory 1.1"
                    },
                    {
                        "id": "s2",
                        "name": "subCategory 1.2"
                    }
                ]
            },
            {
                "id": "c2",
                "name": "category 1.2",
                "subCategories": [
                    {
                        "id": "s5",
                        "name": "subCategory 2.1"
                    },
                    {
                        "id": "s6",
                        "name": "subCategory 2.2"
                    }
                ]
            }
        ]
    },
    {
        "id": "a2",
        "name": "policy 1.2",
        "categories": [
            {
                "id": "c4",
                "name": "category 1.1",
                "subCategories": [
                    {
                        "id": "s13",
                        "name": "subCategory 1.1"
                    }
                ]
            },
            {
                "id": "c5",
                "name": "category 1.2",
                "subCategories": [
                    {
                        "id": "s17",
                        "name": "subCategory 2.1"
                    },
                    {
                        "id": "s18",
                        "name": "subCategory 2.2"
                    }
                ]
            },
            {
                "id": "c6",
                "name": "category 1.3",
                "subCategories": [
                    {
                        "id": "s21",
                        "name": "subCategory 3.1"
                    }
                ]
            }
        ]
    }
   ]
  }

I dont want to use any library.

ts file:

  getAllAuditPolicies() {
    this.policyService
     .getAllPolicies()
     .subscribe(data => {
       this.dropdownData = data;
   });
 }

to open the category

 open(i){
   this.dropdownData1 = this.dropdownData[i].categories;
   console.log("dataas1", this.dropdownData1);
 }

to open the subcategory

subOpen(j){
   this.dropdownData2 = this.dropdownData1[j].subCategories;
   console.log("dataas2", this.dropdownData2);
 }

HTML file:

     <div class="container">
      <div class="row">
       <table class="table">
        <tr class="panel-heading bgOrg">
          <th class="th-font">&nbsp;</th>
          <th class="th-font">Name</th>
       </tr>
      <tr *ngFor='let data of dropdownData; let i=index' (click)="open(i)" >
          <td >+</td>
          <td>{{data.name}}</td>        
      </tr>
      <tr *ngFor='let group of dropdownData1; let j=index' (click)="subOpen(j)">
        <td>+</td>
        <td>{{group.name}}</td>     
      </tr>
      <tr *ngFor='let subgroup of dropdownData2; let k=index' >
        <td>+</td>
        <td>{{subgroup.name}}</td>     
      </tr >
      <tr></tr>
    </table>
  </div>
</div>

Using this method, the table is showing details.

Problem:

but,The categories of policy1.1 is category1.1 and category1.2.it should show below the policy1.1 as nested. But if I click on policy1.1,Table is showing values below policy1.2(Expanding the values of policy1.1 below all policies).

Same problem is affecting for subcategories For reference stackblitz implementation is attaching,

stackblitz

What I want to do for solving this problem.

Can anybody help me??

Thanks in Advance

Answer 1

Check if this will work for you

https://stackblitz.com/edit/angular-gxeins?file=src%2Fapp%2Fapp.component.html

<table class="table">
    <thead>
        <tr>
            <th></th>
            <th>Id</th>
            <th>Name</th>
        </tr>
    </thead>
    <tbody>
        <ng-container *ngFor='let policy of data.policy'>
            <tr>
                <td (click)="policy.expand=!policy.expand">+</td>
                <td>{{policy.id}}</td>
                <td>{{policy.name}}</td>
            </tr>
            <ng-container *ngIf="policy.expand && policy.categories && policy.categories.length>0">
                <ng-container *ngFor='let category of policy.categories'>
                    <tr>
                        <td></td>
                        <td (click)="category.expand=!category.expand"> +</td>
                        <td>{{category.id}}</td>
                        <td>{{category.name}}</td>
                    </tr>
                    <ng-container *ngIf="category.expand && category.subCategories && category.subCategories.length>0">
                        <ng-container *ngFor='let subcategory of category.subCategories'>
                            <tr>
                                <td></td>
                                <td></td>
                                <td> +</td>
                                <td>{{subcategory.id}}</td>
                                <td>{{subcategory.name}}</td>
                            </tr>
                        </ng-container>
                    </ng-container>
                </ng-container>
            </ng-container>

        </ng-container>
    </tbody>
</table>

data = {
    policy: [
      {
        id: "a1",
        name: "policy 1.1",
        expand:false,
        categories: [
          {
            id: "c1",
            name: "category 1.1",
            expand:false,
            subCategories: [
              {
                id: "s1",
                name: "subCategory 1.1"
              },
              {
                id: "s2",
                name: "subCategory 1.2"
              }
            ]
          },
          {
            id: "c2",
            name: "category 1.2",
            expand:false,
            subCategories: [
              {
                id: "s5",
                name: "subCategory 2.1"
              },
              {
                id: "s6",
                name: "subCategory 2.2"
              }
            ]
          }
        ]
      },
      {
        id: "a2",
        name: "policy 1.2",
        expand:false,
        categories: [
          {
            id: "c4",
            name: "category 1.1",
            expand:false,
            subCategories: [
              {
                id: "s13",
                name: "subCategory 1.1"
              }
            ]
          },
          {
            id: "c5",
            name: "category 1.2",
            expand:false,
            subCategories: [
              {
                id: "s17",
                name: "subCategory 2.1"
              },
              {
                id: "s18",
                name: "subCategory 2.2"
              }
            ]
          },
          {
            id: "c6",
            name: "category 1.3",
            expand:false,
            subCategories: [
              {
                id: "s21",
                name: "subCategory 3.1"
              }
            ]
          }
        ]
      }
    ]
  };