dynamically set unique id to accordion to datatable td in angular

Question

how to set id to accordion dynamically in angular by iteration an array in the datatable tbody tds?

<div class="accordion " id="accordionExample">
    <div class="card">
        <div class="card-header" id="headingOne">
            <button class="btn btn-link collapsed" type="button" data-toggle="collapse" 
                data-target="#p__detail" 
                aria-expanded="true" aria-controls="p__detail">
                <h6 *ngFor="let address of custmodel.addressList| slice:0:2">{{address}}</h6>
            </button>
        </div>
        <div id="p__detail" class="collapse " aria-labelledby="headingOne" data-parent="#accordionExample">
            <div class="card-body">
                <h6 *ngFor="let address of custmodel.addressList| slice:2:4">{{address}}</h6>
            </div>
        </div>
    </div>
</div>

Please see if this helps: https://stackoverflow.com/questions/49589713/dynamically-assign-element-id-inside-ngfor/49589942 — Nandun Bandara, Oct 20 '20 at 15:25

Joshue · Answer 1 · 2020-10-20T16:20:07.317

Try this on your code(This works assuming you only need 1 id for an accordion, if you need more than one id you need to implement an id array):

    // ts file
    public acordionId = '';

    setId(item: any) {
      this.acordionId = item;
      return item;
    }
    
    // html file
    <div class="accordion" [id]="acordionId">
        <div class="card">
            <div class="card-header" id="headingOne">
                <button class="btn btn-link collapsed" type="button" data-toggle="collapse" 
                    data-target="#p__detail" 
                    aria-expanded="true" aria-controls="p__detail">
                    <h6 *ngFor="let address of custmodel.addressList| slice:0:2">{{address}}</h6>
                </button>
            </div>
            <div id="p__detail" class="collapse " aria-labelledby="headingOne" data-parent="#accordionExample">
                <div class="card-body">
                    <h6 *ngFor="let address of custmodel.addressList| slice:2:4">{{setId(address)}}</h6>
                </div>
            </div>
        </div>
    </div>

dynamically set unique id to accordion to datatable td in angular

1 Answers1