How to make only one radiobutton clickable with PrimeNG p-table angular

Question

I'm using PrimeNg table to display my items.

<p-table *ngIf="certificates | async as certificates" [value]="certificates">
    <ng-template pTemplate="header">
      <tr>
        <th style="max-width: 40%">Name</th>
        <th style="max-width: 10%">Valid</th>
        <th style="max-width: 10%">Active</th>
      </tr>
    </ng-template>
    <ng-template pTemplate="body" let-certificate>
      <p-skeleton *ngIf="loading"></p-skeleton>
      <tr *ngIf="!loading">
        <th>{{ certificate.name }}</th>
        <td>{{ certificate.pac }}</td>
        <td><i class="bi bi-check-lg"></i></td>
        <td>
          <input
            (click)="getActiveStatus(certificate)"
            [checked]="certificate.active"
            type="radio"
          />
        </td>
      </tr>
    </ng-template>
</p-table>

I want to be able to choose only one radiobutton. Right now I can click and select all my radiobuttons but I don't want that to be the case. Does anyone know how can only one radiobutton be selected at a time ?

Answer 1

Try to append "name" attribute with same value to all radiobuttons :

  <input
    (click)="getActiveStatus(certificate)"
    [checked]="certificate.active"
    type="radio"
    name="group1"
  />