Angular 2, dynamic bind attribute name

Question

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.

how does the resulting html look like? <div name1="name"...? — Max Koretskyi
– Max Koretskyi, Commented Jun 16, 2017 at 7:26
Can you please be more specific of what you want to achieve ? — Abrar
– Abrar, Commented Jun 16, 2017 at 7:43

NiRUS · Accepted Answer · 2017-06-17 15:07:50Z

8

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 component scope. To achieve this you need to make each div as a dynamic component and compile it. Kinda hacky i guess.

Template:

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

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

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

component:

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:

edited Jun 17, 2017 at 15:07

answered Jun 17, 2017 at 15:00

NiRUS

4,3092 gold badges32 silver badges52 bronze badges

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

3 Comments

Duannx Over a year ago

wow. It is cool. i will check it soon and acept your answer. Thanks

Duannx Over a year ago

It works. I accepted it. But there are some points i don't understand. 1. Why need to implement AfterViewInit? 2. If place code in ngAfterViewInit, it only work when the data is ready in start time. To apply code in anychange, i use ngAfterViewChecked instead. But there is a problem that ngAfterViewChecked fire so many time in one change and it will make my app slower. What i should to do? Thank you

NiRUS Over a year ago

@Duannx in that case separate the logic in the form of a function and call on ngChange of that particular model.

Arjun · Accepted Answer · 2017-06-16 08:09:45Z

3

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.

answered Jun 16, 2017 at 8:09

Arjun

5163 gold badges6 silver badges26 bronze badges

1 Comment

Duannx Over a year ago

It is just a walk around. I just want to know have or not anyway to solve the main problem. Thanks.

Collectives™ on Stack Overflow

Angular 2, dynamic bind attribute name

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related