Can't set variable as html element attribute

Question

I found a problem that I do not know how to solve.

If you use this template, so there is no problem:

<li *ngFor="#supplier of supplierList | async">
    <a (click)="changeSupplier($event)">
        <span>{{supplier.id}}: {{supplier.name}}</span>
    </a>
</li>

Output is e.g.:

<li>
    <a>
        <span>1: Sony</span>
    </a>
</li>
<li>
    <a>
        <span>2: Samsung</span>
    </a>
</li>

If I edit a template and try to set the "supplier.id" into html attribute "data-supplierid":

<li *ngFor="#supplier of supplierList | async">
    <a (click)="changeSupplier($event)" data-supplierid="{{supplier.id}}">
        <span>{{supplier.name}}</span>
    </a>
</li>

An error appears:

Can't bind to 'supplierid' since it isn't a known native property ("i>
                    <li *ngFor="#supplier of supplierList | async">
                        <a (click)="changeSupplier($event)" [ERROR ->]data-supplierid="{{supplier.id}}">
                            <span>{{supplier.name}}</span>
                        </a>

`attr.data-supplierid` – Eric Martinez Jan 23 '16 at 14:56 — Eric Martinez, Jan 23 '16 at 14:56

score 12 · Accepted Answer · answered Jan 23 '16 at 15:05

12

Default is property binding. For attribute binding use either

attr.data-supplierid="{{supplier.id}}"

or

[attr.data-supplierid]="supplier.id"

answered Jan 23 '16 at 15:05

Günter Zöchbauer

623,577
216
2,003
1,567

and what if I want to add a string in that attribute plus that variable? EX: attr.data-supplierid="accordion + {{supplier.id}}" in order to get attr.data-supplierid="accordion1" attr.data-supplierid="accordion2" – Janatbek Orozaly Jul 18 '17 at 17:43
Just omit `{{}}` and be good. `[]` and `{{}}` are **never** used together on the same attribute. – Günter Zöchbauer Jul 18 '17 at 17:47
can I use like this? attr.data-supplierid="accordion{{supplier.id}}" – Janatbek Orozaly Jul 18 '17 at 17:49
Yes, this will work as well – Günter Zöchbauer Jul 18 '17 at 17:50

Can't set variable as html element attribute

1 Answers1

Linked

Related