How do I pass a value from *ngFor (Angular) to the data-target attribute?

Question

I wanted to make dynamic collapsible lists using Angular and the Bootstrap library. As I don't know how many there will be, I wanted to put them in the *ngFor loop. I ran into a problem at the very beginning. I need to know what element I am folding and hiding. For this purpose there are two parameters data-target (for a button) and id for a list of text. My method below doesn't work. I am getting an error:

ERROR Error: Uncaught (in promise): Error: Template parse errors:
Can't bind to 'target' since it isn't a known property of 'button'. ("One">
          <h5 class="mb-0">
            <button class="btn btn-link" data-toggle="collapse" [ERROR ->]data-target="{{section.key}}" aria-expanded="true" aria-controls="collapseOne">
              {{sect"): ng:///PortalModule/FaqComponent.html@14:64
Error: Template parse errors:
Can't bind to 'target' since it isn't a known property of 'button'. ("One">
          <h5 class="mb-0">
            <button class="btn btn-link" data-toggle="collapse" [ERROR ->]data-target="{{section.key}}" aria-expanded="true" aria-controls="collapseOne">
              {{sect"): ng:///PortalModule/FaqComponent.html@14:64
    at syntaxError (compiler.js:2175)
    at TemplateParser.parse (compiler.js:11388)
    at JitCompiler._parseTemplate (compiler.js:25961)
    at JitCompiler._compileTemplate (compiler.js:25949)
    at compiler.js:25893
    at Set.forEach (<anonymous>)
    at JitCompiler._compileComponents (compiler.js:25893)
    at compiler.js:25806
    at Object.then (compiler.js:2166)
    at JitCompiler._compileModuleAndComponents (compiler.js:25805)
    at resolvePromise (zone-evergreen.js:797)
    at resolvePromise (zone-evergreen.js:754)
    at zone-evergreen.js:858
    at ZoneDelegate.invokeTask (zone-evergreen.js:391)
    at Object.onInvokeTask (core.js:39680)
    at ZoneDelegate.invokeTask (zone-evergreen.js:390)
    at Zone.runTask (zone-evergreen.js:168)
    at drainMicroTaskQueue (zone-evergreen.js:559)

Here's my code.

  <div id="accordion">
    <div *ngFor="let section of sections; let i = index">
      <div class="card">
        <div class="card-header" id="headingOne">
          <h5 class="mb-0">
            <button class="btn btn-link" data-toggle="collapse" data-target="{{section.key}}" aria-expanded="true" aria-controls="collapseOne">
              {{section.value}}
            </button>
          </h5>
        </div>
        <div id="{{section.key}}" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
          <div class="card-body">
            Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
          </div>
        </div>
      </div>
    </div>
  </div>

The problem is these 2 parameters. I don't know how I can dynamically assign them.

Answer 1

Here is the answer that may help.

[attr.data-target]="value"