How to add dynamic index from ngFor to html attribute value

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'

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">

Try:

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