Making a collapse function open only one at a time in angular

I have an angular app where I implemented a collapse function. It works fine but I need the collapse to only open one at at time. I am using Ng-Bootstrap collapse to execute it. Here is the TS file:

public isCollapsed = true;

Here is the HTML file:

<tr
        class="row-green pe-auto"
        (click)="collapse.toggle()"
        [attr.aria-expanded]="!isCollapsed"
      >
        <td>
          <img
            src="assets/images/home/row-expand.png"
            data-toggle="collapse"
            data-target=".row1-hide"
          />
          Created 
        </td>

        <td>User </td>
        <td>Tuesday</td>
      </tr>

      <tr class="clp-row clp-r1">
        <td colspan="3">
          <div
            class="collapse row1-hide"
            #collapse="ngbCollapse"
            [(ngbCollapse)]="isCollapsed"
          >
            <div class="t-logdiv">
              <div class="req-head">
                <div>
                  <h5>od</h5>
                  <h5>ath</h5>
                  <h5>Referee</h5>
                  <h5>Claim</h5>
                </div>

                <div>
                  <span>PUT</span>
                  <span>ur/jf/jf</span>
                  <span
                    >https://try.w</span
                  >
                  <span>.4.4.4.4</span>
                </div>
              </div>
              <div class="req-body">
                <div>
                  <h5>
                    Request Body
                    <img
                      src="assets/images/zone-info/copy.png"
                      onclick="copy1()"
                      data-toggle="tooltip"
                      data-placement="top"
                      title="copy"
                    />
                  </h5>
                </div>
                <div>
                  <pre id="code1">
                  <code >
                    {{ "{" }}
                      "name": "Test",
                      "description": "Test",
                      "permission": [
                      "c",
                      "r",
                      "u",
                      "d"
                      ]
                      {{ "}" }}
                    </code>
                  </pre>
                </div>
              </div>
            </div>
          </div>
        </td>
      </tr>
      <tr
        class="row-blue"
        (click)="collapse.toggle()"
        [attr.aria-expanded]="!isCollapsed"
      >
        <td>
          <img
            src="assets/images/home/row-expand.png"
            data-toggle="collapse"
            data-target=".row2-hide"
          />
          Created user
        </td>

        <td>new kiid - Joey</td>
        <td>Tue 10</td>
      </tr>
      <tr class="clp-row clp-r1">
        <td colspan="3">
          <div
            class="collapse row2-hide"
            #collapse="ngbCollapse"
            [(ngbCollapse)]="isCollapsed"
          >
            <div class="t-logdiv">
              <div class="req-head">
                <div>
                  <h5>od</h5>
                  <h5>h</h5>
                  <h5>Referee</h5>
                  <h5>jj</h5>
                </div>

                <div>
                  <span>PUT</span>
                  <span>num/url/url/uuu</span>
                  <span
                    >https://dummydata.net</span
                  >
                  <span>0.0.0.0</span>
                </div>
              </div>
              <div class="req-body">
                <div>
                  <h5>
                    Request Body
                    <img
                      src="assets/images/zone-info/copy.png"
                      onclick="copy2()"
                      data-toggle="tooltip"
                      data-placement="top"
                      title="copy"
                    />
                  </h5>
                </div>
                <div>
                  <pre id="code2">
                  <code>
                    {{'{'}}

                      "name": "Test",
                      "description": "Test",
                      "permission": [
                      "c",
                      "r",
                      "u",
                      "d"
                      ]
                      {{'}'}}
                  </code>
                  </pre>
                </div>
              </div>
            </div>
          </div>
        </td>
      </tr>

I'd like to make each collapsible independent of the other, so opening one does not trigger the next one to be open.

For each collapsible, you must make a separate boolean variable

public isCollapsed1 = true;
public isCollapsed2 = true;

As each collapsible will be in a distinct state, opening one will not cause the other to open.

<tr
  class="row-green pe-auto"
  (click)="collapse1.toggle()"
  [attr.aria-expanded]="!isCollapsed1"
>
  <td>
    <img
      src="assets/images/home/row-expand.png"
      data-toggle="collapse"
      data-target=".row1-hide"
    />
    Created
  </td>

  <td>User </td>
  <td>Tuesday</td>
</tr>

<tr class="clp-row clp-r1">
  <td colspan="3">
    <div
      class="collapse row1-hide"
      #collapse1="ngbCollapse"
      [(ngbCollapse)]="isCollapsed1"
    >
      <div class="t-logdiv">
        <!-- Content for collapsible 1 -->
      </div>
    </div>
  </td>
</tr>

<tr
  class="row-blue"
  (click)="collapse2.toggle()"
  [attr.aria-expanded]="!isCollapsed2"
>
  <td>
    <img
      src="assets/images/home/row-expand.png"
      data-toggle="collapse"
      data-target=".row2-hide"
    />
    Created user
  </td>

  <td>new kiid - Joey</td>
  <td>Tue 10</td>
</tr>

<tr class="clp-row clp-r1">
  <td colspan="3">
    <div
      class="collapse row2-hide"
      #collapse2="ngbCollapse"
      [(ngbCollapse)]="isCollapsed2"
    >
      <div class="t-logdiv">
        <!-- Content for collapsible 2 -->
      </div>
    </div>
  </td>
</tr>