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 :(

snorkpete · Accepted Answer · 2017-03-16 14:44:38Z

19

Try:

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

answered Mar 16, 2017 at 14:44

snorkpete

14.6k3 gold badges43 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Stéphane GRILLON · Accepted Answer · 2019-03-20 14:50:03Z

8

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

answered Mar 20, 2019 at 14:50

Stéphane GRILLON

11.9k16 gold badges100 silver badges180 bronze badges

Comments

Meir · Accepted Answer · 2017-03-16 14:44:30Z

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'

answered Mar 16, 2017 at 14:44

Meir

14.4k4 gold badges44 silver badges49 bronze badges

Collectives™ on Stack Overflow

How to add dynamic index from ngFor to html attribute value

3 Answers 3

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Linked

Related