Angular 2 Template Parse Error on html5 data- attributes

Question

The Angular 2 app I'm working on is for a call center.

I have created an Angular 2 component that is a bootstrap modal. It works perfectly when I instantiate one or several on a page, and create the triggers to open them. There are no issues there. I have tested that part thoroughly.

Now in my app, we have a list of checkboxes which when clicked, a modal is supposed to pop up and have instructions for the call center agent to cover when they have chosen a reason for the call.

To create these modals and the triggers, this is the code that I have placed:

<div class="checkbox" *ngFor="#case of caseTypes; #i = index" data-toggle="modal" data-target="modal-i">
    <label>
        <input type="checkbox" [(ngModel)]="case.selected"> {{case.title}}
    </label>
    <instructions-modal [instruction]="case.instructions" title="{{case.title}}" closeButtonTitle="Finished" modalId="modal-{{i}}"></instructions-modal>
</div>

This seems like it should work, but I get the following error in my browser console when I go to the page:

EXCEPTION: Error: Uncaught (in promise): Template parse errors:
Can't bind to 'data-toggle' since it isn't a known native property ("ss="col-md-6">
        <h4>Case Type</h4>
        <div class="checkbox" *ngFor="#case of caseTypes; #i = index" [ERROR ->][data-toggle]="modal" [data-target]="modal-i">
            <label>
                <input type="checkbox" [(ngModel)]="cas"): CaseCreation@8:64
Can't bind to 'data-target' since it isn't a known native property ("ase Type</h4>
        <div class="checkbox" *ngFor="#case of caseTypes; #i = index" [data-toggle]="modal" [ERROR ->][data-target]="modal-i">
            <label>
                <input type="checkbox" [(ngModel)]="case.selected"> {{case.ti"): CaseCreation@8:86

I checked this question but it didn't help me any. I tried with and without the [] around data-toggle and data-target and neither way seems to work. I've also tried it on the div that wraps the checkbox as well as the label and I get the same error in both spots.

Is there any way to use *ngFor with custom attributes or non-native attributes on HTML elements?

it is interesting that you get an error, it means that angular actually tries to bind to data-toggle, but it should not do this. Which version of angular do you use? Is your sample code correct? — kemsky, Apr 13 '16 at 00:12

score 9 · Accepted Answer · edited Jun 20 '20 at 09:12

9

This is because data- is not a prop (property) of div

[foo]="exp" means "propagate value of exp evaluation to the foo property".

If you want to influence attribute value you need to use [attr.foo].

This will get it working for you:

    [attr.data-toggle]=""

edited Jun 20 '20 at 09:12

Community

1
1

answered Apr 12 '16 at 22:52

Mark Pieszak - Trilon.io

61,391
14
82
96

Should this really be necessary? Why are data attributes unique and angular is trying to bind them? – mariocatch Apr 13 '16 at 00:29
Without attr. It thinks it's a prop, believe that's why it errors out for them – Mark Pieszak - Trilon.io Apr 13 '16 at 00:36
So you can't write pure html with angular loaded? It just seems awkward. – mariocatch Apr 13 '16 at 00:37
1

You can, i can't see exactly what he is doing just know that whatever he put, angular thinks it's an actual property of a div tag. Big diff between attr and prop. Going to make a fiddle tomorrow this might be worth making an issue on github over it is rather strange. It is because it's inside an *ngFor as well. But still, weird. @mariocatch – Mark Pieszak - Trilon.io Apr 13 '16 at 01:34
Also it's because he is doing [ ] brackets around them, all while in a ngFor. I'll look more tomorrow – Mark Pieszak - Trilon.io Apr 13 '16 at 01:36
It's worth to mention that whatever JS data you're going to attach to these custom properties, if you're grabbing it from an object, you shouldn't use the curly braces (**{}**) to render it. So, do **NOT** do: `[attr.data-custom]="{{myObj.property}}"` Instead, do: `[attr.data-custom]="myObj.property"` – Lucio Mollinedo Jul 12 '16 at 01:22

score 2 · Answer 2 · edited Jun 20 '20 at 09:12

Angular makes a clear distinction between attribute and properties of an HTML element because they really are.

If you go through the developer guide for template binding, it has a section dedicated to this difference.

Attributes are defined by HTML. Properties are defined by the DOM (Document Object Model).

The standard binding operator we use [] does a DOM level property binding. To do attribute binding we need a prefix attr inside [].

Look at the section HTML attribute vs. DOM property to understand how attribtue and property bindings differ.

Angular 2 Template Parse Error on html5 data- attributes

2 Answers2

Linked