I have a code block angular 2 like that:

<div *ngFor="let elm of elms; let i = index" [attr.name]="name" text-center>
    {{elm }}
</div>

It works fine.
But when i want to dynamic set attribute name base on index like name-1="name" name-2="name"i dont know how to do it.
I tried [attr.name-{{i}}]="name"or [attr.name- + i]="name" but it does not work. Is there any way to do it?
Many thanks.

I have a code block angular 2 like that:

<div *ngFor="let elm of elms; let i = index" [attr.name]="name" text-center>
    {{elm }}
</div>

It works fine.
But when i want to dynamic set attribute name base on index like name-1="name" name-2="name"i dont know how to do it.
I tried [attr.name-{{i}}]="name"or [attr.name- + i]="name" but it does not work. Is there any way to do it?
Many thanks.

• javascript
• angular

• how does the resulting html look like? <div name1="name"...? – Max Koretskyi Commented Jun 16, 2017 at 7:26
• @Maximus, <div name-1="name"... <div name-2="name"... – Duannx Commented Jun 16, 2017 at 7:31
• @VladimirZdenek, Sorry, it does not work – Duannx Commented Jun 16, 2017 at 7:36
• Can you please be more specific of what you want to achieve ? – Abrar Commented Jun 16, 2017 at 7:43
• Certainly you can create an attribute directive for this. – Amit Chigadani Commented Jun 16, 2017 at 7:47

2 Answers 2

To start off thanks to OP for the question. I eventually learnt new things by solving this answer. Below explanation on how i achieved.

Important: One catch you cannot bind the dynamic attribute to your ponent scope. To achieve this you need to make each div as a dynamic ponent and pile it. Kinda hacky i guess.

Template:

<div #looped *ngFor="let elm of elms; let i = index;" text-center>
  {{elm }}
</div>

and in the ponent import implements AfterViewInit and ViewChildren decorator to get children elements and its changes on rendering:

import { Component, ViewChildren, QueryList, AfterViewInit } from '@angular/core';

ponent:

export class ExamplePage implements AfterViewInit {
  elms : Array<string> = ["d1", "d2", "d3"]
  @ViewChildren('looped') things: QueryList<any>;
  constructor() { }

  ngAfterViewInit() {
    this.things.forEach((t, index) => {
      let el : HTMLDivElement = t.nativeElement;
      el.setAttribute("name-" + index , "dynamicAttrString");
    })
  }
}

Output:

I don't know weather it is possible or not but I've alternate solution

<div *ngFor="let elm of elms; let i = index" [attr.name]="{id : index, data : name}">{{item}}</div>

then you'll get object as avalue with id and data keys, hope this helps.