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

https://stackblitz.com/edit/angular-19bfsa?file=src%2Fapp%2Fapp.component.html — Angel Reji, Feb 03 '20 at 13:17
hi @AngelReji, i have developed an angular plugin `angular-tree-table` for this, here is the demo https://anjnkmr.github.io/angular-tree-table — anjnkmr, Apr 27 '20 at 06:45

score 1 · Accepted Answer · answered Feb 03 '20 at 13:40

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"
              }
            ]
          }
        ]
      }
    ]
  };

table row end is not correctly aligned... What I will do for — Angel Reji, Feb 03 '20 at 13:53
@AngelReji how you expect to align? add some images. But the alignment we can fix using colspan & CSS. should not be a problem — Ravin Singh D, Feb 03 '20 at 13:56
Can I use this by the method which I used?? which means by using values from three different method(dropdownData ,dropdownData1,dropdownData2). Instead of taking category from policy(policy.categories), I need to pass index and want to get value and wanna display variables below each policies. — Angel Reji, Feb 04 '20 at 09:14
Because I am using three different APIs... For getting the category, I have to pass policy as searchTerm , and likewise I have to pass category as searchTerm for getting subcategory..Thats why I used three methods....Instead of these three method I will have three getmethods — Angel Reji, Feb 04 '20 at 09:17
You can. after clicking policy set flag for loading and when data came, keep the data as an array (dropdownData1). then in ngFor you can filter the item which belong to the clicked policy. — Ravin Singh D, Feb 04 '20 at 10:14
need to close one row when other open.. for that what condition I have to write — Angel Reji, Feb 04 '20 at 15:40
I have the same which you send me in stackblitz.... Eg: the policy contains 2 categories.... first I open category1.1 ,then I open category 1.2 , now the category 1.1 should automatically close the expansion. At a time only one tr should expand — Angel Reji, Feb 05 '20 at 04:51
I am facing a problem in table, here is the link "https://stackoverflow.com/questions/60096967/angular-2-tree-table-using-api"... I dont need to close the row.. Can you please guide me?? — Angel Reji, Feb 06 '20 at 14:18

tree table using normal html tree table- angular 2+

1 Answers1