Geek Answers Handbook

Angular 2 Template parsing error in html5 data attributes

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

I created an Angular 2 component that is bootable modal. It works great when I create an instance of one or more on a page and create triggers to open them. No problem. I thoroughly checked this part.

Now in my application we have a list of checkboxes that, when clicked on, a modal code should appear and have instructions for the call center agent to cover when they choose the reason for the call.

To create these modals and triggers, this is the code I posted:

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

It seems like it should work, but I get the following error in the 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

, . [] data-toggle data-target, . div, , , .

*ngFor HTML-?

+4
2

, data- () div

[foo]="exp" " exp- foo" .

, [attr.foo].

:

    [attr.data-toggle]=""
+6

Angular HTML, .

, , .

HTML. DOM (Document Object Model).

, [], DOM. , attr [].

HTML attribute vs. DOM property, , .

+2

More articles:


All Articles