Expand/collapse table rows in Angular-CodePudding

The table requires that a table nested to each row can be displayed. Can only be collapsed when selecting in the same row.

<table class="table">
  <thead>
    <tr class="header-row">
      <th class="header">Province</th>
    </tr>
  </thead>
  <tbody class="table-row-expanded" *ngFor="let covenant of covenants; let i = index">
    <tr class="table-row-not-expanded">
      <td class="cell" (click)="selectItemCoverages(i)"> {{ covenant.provinceID }}
        <ng-container *ngIf="openCoverages && indexSelectedCoverage === i">
          <table class="table">
            <thead>
              <tr class="header-row">
                <th class="header">header 1</th>
                <th class="header">header 2</th>
                <th class="header">header 3</th>
              </tr>
            </thead>
            <tbody>
              <tr class="table-row">
                <td class="cell">1</td>
                <td class="cell">2</td>
                <td class="cell">3</td>
              </tr>
            </tbody>
          </table>
        </ng-container>
      </td>
    </tdr>
  </tbody>
</table>

Component:

selectItemCoverages(index: number) {
  this.openCoverages = this.openCoverages && this.indexSelectedCoverage === index ? false : true;
  this.indexSelectedCoverage = index;
}

The logic problem is to control that selecting in another row (different) does not close the previous one.

CodePudding user response：

For keeping the table row expanded until you click on the row to collapse, you just need boolean flag on each element array. I would suggest to create property under your array as false and set it to toggle on click of row. Also, as @brandon mentioned in comment, your html is invalid. So I modified it a bit.

HTML:

<table >
  <tr >
    <th >Province</th>
  </tr>
  <tr
    
    *ngFor="let covenant of covenants; let i = index"
  >
    <td  (click)="covenant.isExpanded = !covenant.isExpanded">
      <div>{{ covenant.provinceID }}</div>

      <div *ngIf="covenant.isExpanded" >
        <div >
          <table >
            <tr >
              <th >header 1</th>
              <th >header 2</th>
              <th >header 3</th>
            </tr>
            <tr >
              <td >1</td>
              <td >2</td>
              <td >3</td>
            </tr>
          </table>
        </div>
      </div>
    </td>
  </tr>
</table>

TS:

import { Component, OnInit, VERSION } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit {
  name = 'Angular '   VERSION.major;

  covenants: any = [
    { provinceID: 1 },
    { provinceID: 2 },
    { provinceID: 3 },
    { provinceID: 4 },
    { provinceID: 5 },
  ];

  openCoverages = false;
  indexSelectedCoverage = 1;

  ngOnInit() {
    this.covenants.forEach((_covenants) => {
      _covenants.isExpanded = false;
    });
  }
  selectItemCoverages(index: number) {
    //this.openCoverages = this.openCoverages && this.indexSelectedCoverage === index ? false : true;
    //this.indexSelectedCoverage = index;
  }
}

Play here