Angular 2 Template Parse Error on html5 data- attributes [duplicate]

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
– kemsky, Commented Apr 13, 2016 at 0:12

Community · Accepted Answer · 2020-06-20 09:12:55Z

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, 2020 at 9:12

CommunityBot

11 silver badge

answered Apr 12, 2016 at 22:52

Mark Pieszak - Trilon.io

68.3k15 gold badges84 silver badges96 bronze badges

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

6 Comments

mariocatch Over a year ago

Should this really be necessary? Why are data attributes unique and angular is trying to bind them?

Mark Pieszak - Trilon.io Over a year ago

Without attr. It thinks it's a prop, believe that's why it errors out for them

mariocatch Over a year ago

So you can't write pure html with angular loaded? It just seems awkward.

Mark Pieszak - Trilon.io Over a year ago

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 Over a year ago

Also it's because he is doing [ ] brackets around them, all while in a ngFor. I'll look more tomorrow

|

Community · Accepted Answer · 2020-06-20 09:12:55Z

2

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.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Apr 13, 2016 at 1:44

Chandermani

42.7k12 gold badges88 silver badges89 bronze badges

Collectives™ on Stack Overflow

Angular 2 Template Parse Error on html5 data- attributes [duplicate]

2 Answers 2

6 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Linked

Related