title: Angular 7, Bootstrap Collapse and dynamic value for aria-controls
body: <p>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.   </p>
  
  <p>This is my component. </p>
  
  <pre><code>&lt;app-table-row&gt;
  </code></pre>
  
  <p>and his code</p>
  
  <pre><code>&lt;table class="table table-bordered"&gt;
    &lt;tbody&gt;
    &lt;tr&gt;
      &lt;td data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="{{client.cnk}}"&gt;
    {{client.cnk}}
      &lt;/td&gt;
      &lt;td&gt;&lt;/td&gt;
      &lt;td&gt;&lt;/td&gt;
      &lt;td&gt;&lt;/td&gt;
      &lt;td&gt;&lt;/td&gt;
      &lt;td&gt;&lt;/td&gt;
      &lt;td&gt;&lt;/td&gt;
      &lt;td&gt;&lt;/td&gt;
      &lt;td&gt;&lt;/td&gt;
      &lt;td&gt;&lt;/td&gt;
      &lt;td&gt;&lt;/td&gt;
      &lt;td&gt;&lt;/td&gt;
      &lt;td&gt;{{client.modDate}}&lt;/td&gt;
      &lt;td&gt;{{client.rank}}&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;
  
  &lt;div id="{{client.cnk}}" class="collapse" aria-labelledby="headingOne" data-parent="#accordion"&gt;
     &lt;app-inner-table&gt;
  
      &lt;/app-inner-table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And here is usage:</p>
  
  <pre><code>&lt;div class="col-xl-12 app-panel registry-table"&gt;
  
    &lt;app-table-header&gt;&lt;/app-table-header&gt;
   &lt;app-table-row *ngFor="let client of clients" [client]="client"&gt;&lt;/app-table-row&gt;
  &lt;hr&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And in console I see this error:</p>
  
  <pre><code>Can't bind to 'aria-controls' since it isn't a known property of 'td'. ("
    &lt;tbody&gt;
    &lt;tr&gt;
      &lt;td data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" [ERROR -&gt;]aria-controls="{{client.cnk}}"&gt;
        {{client.cnk}}
      &lt;/td&gt;
  </code></pre>