[Fixed] How can I write data attributes using Angular?


When I try to use a data attribute in my template, like this:

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

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.


Use attribute binding syntax instead

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


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

See also :

Leave a Reply

(*) Required, Your email will not be published