How to show and hide a particular table row using angular 8

Question

Any help or hint would be greatly appreciated. I am using Angular 8 with bootstrap 4. Here is my home.component.html

                          <table class="table" border="0">
            <thead class="thead-light">
              <tr>
            <th scope="col">#</th>
            <th scope="col">Report Issued Date</th>
            <th scope="col">Report Name and ID</th>
            <th scope="col">Report Status</th>


              </tr>
            </thead>
            <tbody *ngFor="let report of patient?.listDiagnosticReport">
            <tr>
              <td>{{report.id}}

              </td>
              <td>{{report.reportIssuedDate}}</td>
              <td>
                <button (click)="onShow(report.reportId)"> 
                {{report.reportName+"("+report.reportId+")"}}
                 </button>
              </td>
              <td>{{report.reportStatus}}</td>
            </tr>



            <tr id="{{report.reportId}}"  *ngFor="let procedureRequest of report?.listOfProcedures"  [hidden]="showRow">
                <td [attr.colspan]="4">
                Specimen Collected By: {{procedureRequest.procedureName}}
                <br/>
                Specimen Collection Date: {{procedureRequest.datePerformed}}
                <br/>
                Procedure Name: {{procedureRequest.procedureName}} 
                </td>
            </tr>

            </tbody>

Here is my home.component.ts:

 export class HomeComponent implements OnInit {
  showRow: boolean = true;


  onShow(rowId: string)
  {
    if (this.showRow === true)
    {
      this.showRow = false;

    }
    else
    {
      this.showRow = true;
    }
  }

I placed an id on the row and when it first load all of the rows disappear. When I click on the button it trigger the onShow method with the reportId as an argument. How can I make the particular row show in Angualr 8?

Thank you for everyone's suggestion and help. I am able to hide the row at the beginning and when click the button show the row.

         onShow(reportId: string) {
        const el = <HTMLElement>document.querySelector(`#${reportId}`);
        if (el.hidden === false) {
        el.hidden = true;
        } else {
         // el.classList.remove('hidden');
           el.hidden = false;
        }
      }

My problem is that I have more than one row with the same id. In fact I have 3 rows with the same Id and when I click the button it only shows 1 row and not the other 2 rows.

This is my home.component.html:

         <tr id="{{report.reportId}}"  *ngFor="let procedureRequest of report?.listOfProcedures"  [hidden]="showRow">
                <td [attr.colspan]="4">
                Specimen Collected By: {{procedureRequest.procedureName}}
                <br/>
                Specimen Collection Date: {{procedureRequest.datePerformed}}
                <br/>
                Procedure Name: {{procedureRequest.procedureName}} 
                </td>
         </tr>

Here is the web result:

Does this answer your question? [Angular 2, How to hide a table row on click of a button](https://stackoverflow.com/questions/46901964/angular-2-how-to-hide-a-table-row-on-click-of-a-button) — nab, Dec 03 '19 at 23:08
Do you want all rows with the same ID to hide or just the row you click on? — Smokey Dawson, Dec 04 '19 at 21:08

Smokey Dawson · Answer 1 · 2019-12-03T23:27:23.040

The reason why your code isnt working is because your showRow variable will apply to all the tr elements.

Basically what is happening is

<tr [hidden]="true">
</tr> 
<tr [hidden]="true">
</tr> 
<tr [hidden]="true">
</tr> 
<tr [hidden]="true">
</tr> 
<tr [hidden]="true">
</tr>

because showRow is true, when you apply a variable to a looped element it needs to be unique

You need to do something like this

component.html

<!-- ... -->
<tr id="{{report.reportId}}"  *ngFor="let procedureRequest of report?.listOfProcedures">
  <! ... -->
</tr>

component.ts

showHide(reportId) {
  const el = <HTMLElement>document.querySelector(`#${reportId}`;
  if (el.classList.contains('hidden') {
    el.classList.remove('hidden');
  } else {
    el.classList.add('hidden');
  }
}

component.css

tr {
  display: block;
  // ...
}
tr.hidden {
  display: none;
  // ...
}

basically what is happening is when you click an element it will apply the hidden class to that element and not all the tr elements

OR

If you have control of your report object you could add a hidden field

report: {
  reportId: 1234,
  hidden: false
}

and then in your showHide method

showHide(report) {
  report.hidden = report.hidden ? false : true;
}

then in your component

<tr id="{{report.reportId}}" [hidden]="report.hidden">
</tr>

score 0 · Answer 2 · answered Dec 04 '19 at 01:40

Create a object with reportId and hidden

report = {reportId: number | string, hidden: boolean}

and then create a list of report object with based on how many reports in that list

for example: reports: report[] = [{reportId: 1234, hidden: false}, {report 1235, hidden: false}]

then you can pass this object in your onShow method.

onShow(reportId) { retrun !reportId.hidden; }

you can pass your report from html page

<button (click)=onShow(reportId)></button>

Note: Here you maintain reports in your ts file

How to show and hide a particular table row using angular 8

2 Answers2