title: How to show and hide a particular table <tr> row using angular 8
body: <p>Any help or hint would be greatly appreciated.
  I am using Angular 8 with bootstrap 4.
  Here is my home.component.html</p>
  
  <pre><code>                          &lt;table class="table" border="0"&gt;
              &lt;thead class="thead-light"&gt;
                &lt;tr&gt;
              &lt;th scope="col"&gt;#&lt;/th&gt;
              &lt;th scope="col"&gt;Report Issued Date&lt;/th&gt;
              &lt;th scope="col"&gt;Report Name and ID&lt;/th&gt;
              &lt;th scope="col"&gt;Report Status&lt;/th&gt;
  
  
                &lt;/tr&gt;
              &lt;/thead&gt;
              &lt;tbody *ngFor="let report of patient?.listDiagnosticReport"&gt;
              &lt;tr&gt;
                &lt;td&gt;{{report.id}}
  
                &lt;/td&gt;
                &lt;td&gt;{{report.reportIssuedDate}}&lt;/td&gt;
                &lt;td&gt;
                  &lt;button (click)="onShow(report.reportId)"&gt; 
                  {{report.reportName+"("+report.reportId+")"}}
                   &lt;/button&gt;
                &lt;/td&gt;
                &lt;td&gt;{{report.reportStatus}}&lt;/td&gt;
              &lt;/tr&gt;
  
  
  
              &lt;tr id="{{report.reportId}}"  *ngFor="let procedureRequest of report?.listOfProcedures"  [hidden]="showRow"&gt;
                  &lt;td [attr.colspan]="4"&gt;
                  Specimen Collected By: {{procedureRequest.procedureName}}
                  &lt;br/&gt;
                  Specimen Collection Date: {{procedureRequest.datePerformed}}
                  &lt;br/&gt;
                  Procedure Name: {{procedureRequest.procedureName}} 
                  &lt;/td&gt;
              &lt;/tr&gt;
  
              &lt;/tbody&gt;
  </code></pre>
  
  <p>Here is my home.component.ts:</p>
  
  <pre><code> export class HomeComponent implements OnInit {
    showRow: boolean = true;
  
  
    onShow(rowId: string)
    {
      if (this.showRow === true)
      {
        this.showRow = false;
  
      }
      else
      {
        this.showRow = true;
      }
    }
  </code></pre>
  
  <p>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?</p>
  
  <p>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.</p>
  
  <pre><code>         onShow(reportId: string) {
          const el = &lt;HTMLElement&gt;document.querySelector(`#${reportId}`);
          if (el.hidden === false) {
          el.hidden = true;
          } else {
           // el.classList.remove('hidden');
             el.hidden = false;
          }
        }
  </code></pre>
  
  <p>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.</p>
  
  <p>This is my home.component.html:</p>
  
  <pre><code>         &lt;tr id="{{report.reportId}}"  *ngFor="let procedureRequest of report?.listOfProcedures"  [hidden]="showRow"&gt;
                  &lt;td [attr.colspan]="4"&gt;
                  Specimen Collected By: {{procedureRequest.procedureName}}
                  &lt;br/&gt;
                  Specimen Collection Date: {{procedureRequest.datePerformed}}
                  &lt;br/&gt;
                  Procedure Name: {{procedureRequest.procedureName}} 
                  &lt;/td&gt;
           &lt;/tr&gt;
  </code></pre>
  
  <p>Here is the web result:
     <a href="https://i.stack.imgur.com/RDKde.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/RDKde.jpg" alt="enter image description here"></a></p>