Angular expand/collapsible table Row - using ng-bootstrap

Question

I am creating an application, where when clicking on the TR of my table, I need the line to be expanded to show the details. However, when doing this, all the lines expand showing the data of the line that was clicked as in the result of the image below. can you help me?

Image row expanded result: https://imgur.com/a/NmCiV9Q

My code:

<tbody>
        <ng-container *ngFor="let machine of machines">
          <tr (click)="selectedMachine = machine">
            <td>
              <div class="user-info">
                <div class="user-info__img">
                  <img src="./assets/img/cloud2.svg" alt="Usuário Img">
                </div>
                <div class="user-info__basic">
                  <h5 class="mb-0">{{machine.name}}</h5>
                </div>
              </div>
            </td>
            <td (click)="selectedMachine = machine">
              <span class="active-circle bg-success"></span> Status
            </td>
            <td (click)="selectedMachine = machine">{{machine?.flavor?.disk}} GB</td>
            <td (click)="selectedMachine = machine">{{machine?.flavor?.ram}} GB</td>
            <td (click)="selectedMachine = machine">{{machine?.flavor?.vcpus}}x 2.8Mbps</td>
            <td>
                <button type="button" class="btn btn-primary mr-2" ngbTooltip="Open" (click)="openMachine(machine.id)"><i class="fas fa-external-link-alt"></i></button>
                <button type="button" class="btn btn-primary mr-2" ngbTooltip="Detail"><i class="fas fa-edit"></i></button>
                <button type="button" class="btn btn-danger" ngbTooltip="Delete"><i class="far fa-trash-alt"></i></button>
            </td>
          </tr>
          <ng-container *ngIf="selectedMachine">
            <tr [ngbCollapse]="!selectedMachine">
              <td (click)="selectedMachine = null" class="text-center"><i class="fa fa-angle-up"></i></td>
              <td>hello</td>
              <td>{{selectedMachine?.flavor?.swap}}</td>
              <td>{{selectedMachine?.flavor?.id}}</td>
              <td>2</td>
              <td>2</td>
            </tr>
          </ng-container>
        </ng-container>
       
      </tbody>

My Component:

export class MachinesComponent implements OnInit, OnDestroy {

  constructor(private machine: MachineService) { }

  public selectedMachine: any;
  public machines: any[] = [];
}

Answer 1

<ng-container *ngIf="selectedMachine"> is placed inside the means <ng-container *ngFor="let machine of machines"> . You can read it as for every machine show the selectedMachine container whenever item is selected . I feel that what you want is:

<tbody>
        <ng-container *ngFor="let machine of machines">
...
          <ng-container *ngIf="selectedMachine === machine">
            <tr [ngbCollapse]="!selectedMachine">
              <td (click)="selectedMachine = null" class="text-center"><i class="fa fa-angle-up"></i></td>
              <td>hello</td>
              <td>{{selectedMachine?.flavor?.swap}}</td>
              <td>{{selectedMachine?.flavor?.id}}</td>
              <td>2</td>
              <td>2</td>
            </tr>
          </ng-container>
        </ng-container>
       
      </tbody>

it will show the details of the selected machine only next to this machine.