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?

Answer 1

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]=""

Answer 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.