Dynamically assign element id inside ngFor

Question

I'm trying to give a dynamically assigned id for a div inside a *ngFor. I would like the divs to be called 'wave1, wave2, wave3' etc.

<li *ngFor="let episode of episodes; let i = index">
    <div id="wave{{i}}"></div>
</li>

However, this throws the following error:

ERROR DOMException: Failed to execute 'querySelector' on 'Document': '#wave[object Object]' is not a valid selector.

Can you add code where you use `'#wave...`? Seems it's clear that you concat object with string — yurzui, Mar 31 '18 at 16:03
https://stackoverflow.com/q/34568497, https://stackoverflow.com/q/36051195 — Vega, Mar 31 '18 at 16:18

Hend Khalifa · Accepted Answer · 2018-03-31T17:47:26.650

41

You can use {{ 'wave' + i }} instead of wave{{i}}. Make it as Angular Experession. This is the full ngFor:

<li *ngFor="let episode of episodes; let i = index">
     <div id="{{ 'wave' + i }}"></div>
</li>

It works and creates the div with the correct id

document.getElementById("wave1")

Output will be like this:

<div id="wave1">wave1</div>

but remember your code will start from wave0 as i = index starts from 0.

edited Mar 31 '18 at 17:47

answered Mar 31 '18 at 16:26

Hend Khalifa

That's great for assigning the id, but how do you then reference the Id dynamically in your html? I am trying to implement validation against a field with a dynamically assigned Id. I need to be able to say something like *ngIf="'controlName' + index.invalid". – Jimbo Mar 12 '20 at 08:55

David · Answer 2 · 2018-03-31T16:31:23.673

What you have is correct and should work in angular 4/5. Are you maybe using a really old, pre-release angular 2 version?

Here is a stackblitz with your code and the code below, both working

You can also do it that way, which is the preferred way

<li *ngFor="let episode of episodes; let i = index">
    <div [attr.id]="'wave' + i">{{episode.name}}</div>
</li>

bugs · Answer 3 · 2018-03-31T16:13:44.843

5

You don't need to define i

<li *ngFor="let episode of episodes">
    <div id="wave{{episode}}">{{episode}}</div>
</li>

EDIT: in case episodes is a list of objects

<li *ngFor="let episode of episodes">
    <div id="wave{{episodes.indexOf(episode)}}">{{episode.name}}</div>
</li>

edited Mar 31 '18 at 16:13

answered Mar 31 '18 at 16:05

bugs

1

That won't work if `episodes` is a list of objects, which it probably is in the OP's example – David Mar 31 '18 at 16:09
True, let me modify the example – bugs Mar 31 '18 at 16:12

score 2 · Answer 4 · answered Mar 31 '18 at 16:14

2

For me it works if I add Singlequotes. Otherwise Angular detects a var.

<li *ngFor="let episode of episodes; let i = index">
    <div id="'wave' + i"></div>
</li>

answered Mar 31 '18 at 16:14

Alex Seitz

4 Answers4