Angular 2 - expand collapse table row

Question

There is a requirement to show an in-place row details when I click on an inspector icon of the table which would expand or collapse just like a toggle on click of a button at each row .

In the expanded view, I need to query backend and fetch some details and show information including image thumbnails.

There are a couple of angular 2 tables like ngx-datatable, ngprime etc. Currently, for some reason, we cannot use any of those plugins to achieve this functionality.

Attached an image which has an inline expansion of a row to show the row details.

How do we achieve this functionality in Angular without using any plugins. Could any of you please help?

Answer 1

Very similar to what I answered here: Angular Material Collapsible Card

StackBlitz: https://stackblitz.com/edit/angular-kxkckz

You'll need something like below if you don't want to use any packages:

<style>
  table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
  }

  th, td {
    padding: 5px;
    text-align: left;
  }
</style>


<table fixed>
  <tr>
    <td>
      Click to toggle content 1
      <button (click)="collapsed1=!collapsed1">Toggle me</button>
    </td>
  </tr>
  <tr *ngIf="!collapsed1">
      <td>
        <p>Showing content 1</p>
        <p>Grass is green</p>
      </td>
  </tr>
  <tr>
    <td>
      Click to toggle content 2
      <button (click)="collapsed2=!collapsed2">Toggle me</button>
    </td>
  </tr>
  <tr *ngIf="!collapsed2">
      <td>
        <p>Showing content 2</p>
        <p>The sky is blue</p>
      </td>
  </tr>
</table>

Answer 2

  <table class="table">
       <thead>
     <tr>
      <th style="width:200px;">Name</th>
      <th>Created On</th>
      <th>Last Modified</th>
     </tr>
       </thead>
       <tbody>
     <ng-container *ngFor="let item of menuList">
      <tr>
      <td style="width:10px" attr.data-target=".row{{item._id}}" data-toggle="collapse"
       data-role="expander">
    <span *ngIf="item.SubMenu?.length && item.SubMenu[0].MenuName!==undefined"
     class="fa fa-plus" (click)="toggleChildren($event)">
    </span>&nbsp;{{ item.MenuName }}
      </td>
      <td>{{ item.CreatedBy }}</td>
      <td>{{ item.CreatedDate }}</td>
      </tr>
      <ng-template [ngIf]="item.SubMenu.length>0">
      <ng-container *ngFor="let subitem of item.SubMenu">
    <tr class="collapse row{{subitem.ParentId}}" aria-expanded="true">
     <td style="width:10px" attr.data-target=".row{{subitem._id}}" 
     data-toggle="collapse"
     data-role="expander">
     &nbsp;&nbsp;&nbsp;<span *ngIf="subitem.SubMenu?.length && subitem.SubMenu[0].MenuName!==undefined"
     class="fa fa-plus" (click)="toggleChildren($event)">
       </span>  &nbsp; {{ subitem.MenuName }}
     </td>
     <td>{{ subitem.CreatedBy }}</td>
     <td>{{ subitem.CreatedDate }}</td>
    </tr>
    <ng-template [ngIf]="subitem.SubMenu.length>0">
     <ng-container *ngFor="let sub of subitem.SubMenu">
     <tr class="collapse row{{sub.ParentId}}" aria-expanded="true">
     <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ sub.MenuName }}</td>
     <td>{{ sub.CreatedBy }}</td>
     <td>{{ sub.CreatedDate }}</td>
     </tr>
     </ng-container>
    </ng-template>
      </ng-container>
      </ng-template>
     </ng-container>
       </tbody>
       </table>

Answer 3

I am using the normal table row in angular.

I have given example in StackBlitz and Result

In the TS file, we have created a variable to store table data.

data = [
    {
      id: 1,
      name: 'Abc',
      email: 'abc@mail.com',
      isExpand: false,
      address: [
        {
          add1: 'Delhi',
          add2: 'Bangalore',
        }
      ]
    },
    {
      id: 2,
      name: 'Xyz',
      email: 'xyz@mail.com',
      isExpand: false,
      address: [
        {
          add1: 'Mumbai',
          add2: 'Pune',
        }
      ]
    },
    {
      id: 3,
      name: 'ijk',
      email: 'ijk@mail.com',
      isExpand: false,
      address: [
        {
          add1: 'Chennai',
          add2: 'Bangalore',
        }
      ]
    },
    {
      id: 4,
      name: 'def',
      email: 'def@mail.com',
      isExpand: false,
      address: [
        {
          add1: 'Kolkata',
          add2: 'Hyderabad',
        }
      ]
    }
  ]

In the HTML file, we have a table.

<table>
  <thead>
    <tr>
      <th></th>
      <th>SL</th>
      <th>Name</th>
      <th>Email</th>
    </tr>
  </thead>
  <tbody>
    <ng-container *ngFor="let row of data">
      <tr>
        <td (click)="row.isExpand = !row.isExpand">
          <span *ngIf="!row.isExpand">+</span>
          <span *ngIf="row.isExpand">-</span>
        </td>
        <td>{{ row.id }}</td>
        <td>{{ row.name }}</td>
        <td>{{ row.email }}</td>
      </tr>
      <tr *ngIf="row.isExpand">
        <td colspan="4">
          <table>
            <thead>
              <th>Address1</th>
              <th>Address2</th>
            </thead>
            <tbody>
              <tr *ngFor="let row2 of row.address">
                <td>{{ row2.add1 }}</td>
                <td>{{ row2.add2 }}</td>
              </tr>
            </tbody>
          </table>
        </td>
      </tr>
    </ng-container>
  </tbody>
</table>