Angular 7, Bootstrap Collapse and dynamic value for aria-controls

I am trying create own component and use this in *ngFor. I need unique value for my Collapse. Because now when I click on my second main row in table collapse shows only inner row from first main row, but should show inner row for second main row.

This is my component.

<app-table-row>

and his code

<table class="table table-bordered">
  <tbody>
  <tr>
    <td data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="{{client.cnk}}">
  {{client.cnk}}
    </td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td>{{client.modDate}}</td>
    <td>{{client.rank}}</td>
    </tr>
  </tbody>
</table>

<div id="{{client.cnk}}" class="collapse" aria-labelledby="headingOne" data-parent="#accordion">
   <app-inner-table>

    </app-inner-table>
</div>

And here is usage:

<div class="col-xl-12 app-panel registry-table">

  <app-table-header></app-table-header>
 <app-table-row *ngFor="let client of clients" [client]="client"></app-table-row>
<hr>
</div>

And in console I see this error:

Can't bind to 'aria-controls' since it isn't a known property of 'td'. ("
  <tbody>
  <tr>
    <td data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" [ERROR ->]aria-controls="{{client.cnk}}">
      {{client.cnk}}
    </td>