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>