How can I write data attributes using Angular?

Question

I feel like I am missing something. When I try to use a data attribute in my template, like this:

<ol class="viewer-nav">
    <li *ngFor="#section of sections" data-sectionvalue="{{ section.value }}">
        {{ section.text }}
    </li>
</ol>

Angular 2 crashes with:

EXCEPTION: Template parse errors: Can't bind to 'sectionvalue' since it isn't a known native property ("
]data-sectionvalue="{{ section.value }}">{{ section.text }}

I'm obviously missing something with the syntax, please help.

score 637 · Accepted Answer · edited Aug 27 '19 at 13:52

637

Use attribute binding syntax instead

<ol class="viewer-nav"><li *ngFor="let section of sections" 
    [attr.data-sectionvalue]="section.value">{{ section.text }}</li>  
</ol>

or

<ol class="viewer-nav"><li *ngFor="let section of sections" 
    attr.data-sectionvalue="{{section.value}}">{{ section.text }}</li>  
</ol>

26

how do i access the value of the data attribute? – Sean W Nov 10 '16 at 08:46
5

Please create a new question with some code that demonstrates what you try to accomplish. – Günter Zöchbauer Nov 10 '16 at 08:46
11

This should be Googles #1 answer for the *Can't bind to '' since it isn't a known property of ''* query. This comment might help a bit... – netzaffin Jul 18 '17 at 09:21
2

@netzaffin This is a useful answer but I've ran into the can't bind error many many times and this is the first time this was the actual problem/solution. – Stack Underflow Apr 16 '20 at 18:32
How do I bind a callback function to data-* attributes too? – Devmaleeq Mar 30 '21 at 19:15
@Malik What callback function? Attribute values can only be strings and you can't express a function reference as string. This has nothing to do with Angular, that's a pure DOM thing. – Günter Zöchbauer Mar 31 '21 at 07:18

Maksym Shmelyov · Answer 2 · 2018-10-03T11:57:26.103

56

About access

<ol class="viewer-nav">
    <li *ngFor="let section of sections" 
        [attr.data-sectionvalue]="section.value"
        (click)="get_data($event)">
        {{ section.text }}
    </li>  
</ol>

And

get_data(event) {
   console.log(event.target.dataset.sectionvalue)
}

edited Oct 03 '18 at 11:57

answered May 29 '18 at 10:48

Maksym Shmelyov

681
5
8

How can I write data attributes using Angular?

2 Answers2

See also :

Linked

Related