title: Angular NgFor collapse data inside TR
body: <p>I'm doing an ngfor on returning my API to a table, and I need to hide/show a line of details from my table, but that line is outside my ngfor, so I can't bind my ngfor data.
  Can you help me? Is there a way to do this?
  I thought about using an ng-container but I didn't understand it very well.</p>
  <p>My Component:</p>
  <pre><code>export class MachinesComponent implements OnInit, OnDestroy {
  
    constructor(private machine: MachineService) { }
  
    public isMenuCollapsed = true;
    public machines: any[] = [];
    private alive: boolean = true;
  
    ngOnInit(): void {
      this.machine.getMachines()
        .takeWhile(() =&gt; this.alive)
        .subscribe((machine) =&gt; this.machines = machine['servers']);
    }
  }
  </code></pre>
  <p>My Html code:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;section class=&quot;main-content&quot; *ngIf=&quot;machines.length &gt;0&quot;&gt;
      &lt;table class=&quot;table&quot;&gt;
        &lt;thead&gt;
          &lt;tr&gt;
            &lt;th&gt;Machine&lt;/th&gt;
            &lt;th&gt;Status&lt;/th&gt;
            &lt;th&gt;Disk&lt;/th&gt;
            &lt;th&gt;RAM&lt;/th&gt;
            &lt;th&gt;VCPU&lt;/th&gt;
            &lt;th scope=&quot;col&quot;&gt;Action&lt;/th&gt;
          &lt;/tr&gt;
        &lt;/thead&gt;
        &lt;tbody&gt;
          &lt;tr *ngFor=&quot;let machine of machines&quot;&gt;
            &lt;td (click)=&quot;isMenuCollapsed = !isMenuCollapsed&quot;&gt;
              &lt;div class=&quot;user-info&quot;&gt;
                &lt;div class=&quot;user-info__img&quot;&gt;
                  &lt;img src=&quot;./assets/img/cloud2.svg&quot; alt=&quot;Usuário Img&quot;&gt;
                &lt;/div&gt;
                &lt;div class=&quot;user-info__basic&quot;&gt;
                  &lt;h5 class=&quot;mb-0&quot;&gt;{{machine.name}}&lt;/h5&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/td&gt;
            &lt;td (click)=&quot;isMenuCollapsed = !isMenuCollapsed&quot;&gt;
              &lt;span class=&quot;active-circle bg-success&quot;&gt;&lt;/span&gt; Active
            &lt;/td&gt;
            &lt;td (click)=&quot;isMenuCollapsed = !isMenuCollapsed&quot;&gt;{{machine?.flavor?.disk}} GB&lt;/td&gt;
            &lt;td (click)=&quot;isMenuCollapsed = !isMenuCollapsed&quot;&gt;{{machine?.flavor?.ram}} GB&lt;/td&gt;
            &lt;td (click)=&quot;isMenuCollapsed = !isMenuCollapsed&quot;&gt;{{machine?.flavor?.vcpus}}x 2.8Mbps&lt;/td&gt;
            &lt;td &gt;
                &lt;button type=&quot;button&quot; class=&quot;btn btn-primary mr-2&quot; ngbTooltip=&quot;Open&quot;&gt;&lt;i class=&quot;fas fa-external-link-alt&quot;&gt;&lt;/i&gt;&lt;/button&gt;
                &lt;button type=&quot;button&quot; class=&quot;btn btn-primary mr-2&quot; ngbTooltip=&quot;Detail&quot;&gt;&lt;i class=&quot;far fa-eye&quot;&gt;&lt;/i&gt;&lt;/button&gt;
                &lt;button type=&quot;button&quot; class=&quot;btn btn-primary mr-2&quot; ngbTooltip=&quot;Detail&quot;&gt;&lt;i class=&quot;fas fa-edit&quot;&gt;&lt;/i&gt;&lt;/button&gt;
                &lt;button type=&quot;button&quot; class=&quot;btn btn-danger&quot; ngbTooltip=&quot;Delete&quot;&gt;&lt;i class=&quot;far fa-trash-alt&quot;&gt;&lt;/i&gt;&lt;/button&gt;
            &lt;/td&gt;
          &lt;/tr&gt;
  
           &lt;!-- I need the ngfor data inside this TR line collapse --&gt;
          &lt;tr class=&quot;collapse cell-1 row-child&quot; [ngbCollapse]=&quot;isMenuCollapsed&quot;&gt;
            &lt;td (click)=&quot;isMenuCollapsed = true&quot; class=&quot;text-center&quot;&gt;&lt;i class=&quot;fa fa-angle-up&quot;&gt;&lt;/i&gt;&lt;/td&gt;
            &lt;td&gt;Product&amp;nbsp;&lt;/td&gt;
            &lt;td&gt;iTelefone SX with ratina display&lt;/td&gt;
            &lt;td&gt;QTY&lt;/td&gt;
            &lt;td&gt;2&lt;/td&gt;
            &lt;td&gt;2&lt;/td&gt;
          &lt;/tr&gt;
        &lt;/tbody&gt;
      &lt;/table&gt;
  &lt;/section&gt;
  </code></pre>