How to add dynamic index from ngFor to html attribute value

Question

I run ngFor and I need that some attribute inside the loop would change it's value by adding to it ngFor index. That's mean that each div that is created in ngFor will have uniq attribute value. Source :

<div class="class1" *ngFor="let item of items; let i= index">
    <div class="card-header" role="tab" id="Id">
        <h1>Hello</h1>
    </div>

I want to bind id to get it's value: Id0 when index=0.

<div class="card-header" role="tab" [attr.id]="Id+'i'"> Doesn't work :(

Answer 1

Try:

<div class="card-header" role="tab" id="{{'Id'+i}}">

Answer 2

3 solutions

<div class="card-header" role="tab" id="{{'Id'+i}}">
<div class="card-header" role="tab" [attr.id]="'Id'+i">
<div class="card-header" role="tab" [id]="'Id'+i">

Answer 3

Your quotes seem to be wrong:

<div class="card-header" role="tab" [attr.id]="'Id'+i">

You put it around the 'i' instead of around the 'Id'