Angular 2 - expand collapse table row

Issue

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?

Solution

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>

Answered By - mahval