Add div attributes value dynamically

Question

I want to add div attributes dynamically in Angular 7.

And I tried this:

<div *ngFor="let e of etats._embedded.etats" 
style="background: {{e.codeCouleur}} !important;"  
data-code="{{e.id}}" data-bg={{e.codeCouleur}}>{{e.nom}"</div>

And I have this error:

Uncaught Error: Template parse errors: Can't bind to 'code' since it isn't a known property of 'div'. (" *ngFor="let e of etats._embedded.etats" style="background: {{e.codeCouleur}} !important;" [ERROR ->]data-code="{{e.id}}" data-bg={{e.codeCouleur}}>{{e.nom}"

use [attr.data-code]="e.id" and [attr.data-bg]="e.codeCouleur" instead of data-code="{{e.id}}" data-bg="{{e.codeCouleur}}" — CruelEngine
– CruelEngine, Commented Feb 6, 2019 at 6:08
Thanks @CruelEngine, it's works. But how can i resolve the style="..." ? — Koera Sam Mikorana
– Koera Sam Mikorana, Commented Feb 6, 2019 at 6:14

Yoav Schniederman · Accepted Answer · 2019-02-06 06:15:44Z

4

You have few options:

<div attributeName="{{attributeValue}}"/></div>
<div [attr.attributeName]="attributeValue"/></div>
<div [attr.attributeName]="getAttributeValueFun()"/></div>

answered Feb 6, 2019 at 6:15

Yoav Schniederman

5,4033 gold badges30 silver badges32 bronze badges

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

1 Comment

Tony BenBrahim Over a year ago

1 does not seem to work, but 2 is fine

Philipp Kief · Accepted Answer · 2019-02-06 08:19:37Z

3

When you're looping dynamically you should make use of something like this:

<div *ngFor="let e of etats._embedded.etats" 
     [style.background]="e.codeCouleur"
     [data-code]="e.id" 
     [data-bg]=e.codeCouleur
>{{e.nom}}"</div>

edited Feb 6, 2019 at 8:19

Philipp Kief

8,6745 gold badges36 silver badges44 bronze badges

answered Feb 6, 2019 at 6:13

Abhishek Ekaanth

2,5872 gold badges24 silver badges41 bronze badges

Comments

shhdharmen · Accepted Answer · 2019-02-06 06:25:42Z

3

The thing you're trying to achieve is called Attribute Binding. As the official document says:

You must use attribute binding when there is no element property to bind.

So, according to that, you need to change the code a little bit. For style, you can use ngStyle or [style.background], but !important won't work in it:

<div *ngFor="let e of etats._embedded.etats" 
  [ngStyle]="{'background': e.codeCouleur}"  
  [attr.data-code]="e.id" [attr.data-bg]="e.codeCouleur">{{e.nom}}</div>

answered Feb 6, 2019 at 6:25

shhdharmen

1,46110 silver badges21 bronze badges

Collectives™ on Stack Overflow

Add div attributes value dynamically

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related