title: Angular 2 Template Parse Error on html5 data- attributes
body: <p>The Angular 2 app I'm working on is for a call center. </p>
  
  <p>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. </p>
  
  <p>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. </p>
  
  <p>To create these modals and the triggers, this is the code that I have placed:</p>
  
  <pre><code>&lt;div class="checkbox" *ngFor="#case of caseTypes; #i = index" data-toggle="modal" data-target="modal-i"&gt;
      &lt;label&gt;
          &lt;input type="checkbox" [(ngModel)]="case.selected"&gt; {{case.title}}
      &lt;/label&gt;
      &lt;instructions-modal [instruction]="case.instructions" title="{{case.title}}" closeButtonTitle="Finished" modalId="modal-{{i}}"&gt;&lt;/instructions-modal&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This seems like it should work, but I get the following error in my browser console when I go to the page:</p>
  
  <pre><code>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"&gt;
          &lt;h4&gt;Case Type&lt;/h4&gt;
          &lt;div class="checkbox" *ngFor="#case of caseTypes; #i = index" [ERROR -&gt;][data-toggle]="modal" [data-target]="modal-i"&gt;
              &lt;label&gt;
                  &lt;input type="checkbox" [(ngModel)]="cas"): CaseCreation@8:64
  Can't bind to 'data-target' since it isn't a known native property ("ase Type&lt;/h4&gt;
          &lt;div class="checkbox" *ngFor="#case of caseTypes; #i = index" [data-toggle]="modal" [ERROR -&gt;][data-target]="modal-i"&gt;
              &lt;label&gt;
                  &lt;input type="checkbox" [(ngModel)]="case.selected"&gt; {{case.ti"): CaseCreation@8:86
  </code></pre>
  
  <p>I checked <a href="https://www.reddit.com/r/Angular2/comments/3sjnw4/help_cant_bind_to_type_since_it_isnt_a_known/" rel="nofollow">this question</a> but it didn't help me any. I tried with and without the <code>[]</code> around <code>data-toggle</code> and <code>data-target</code> 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. </p>
  
  <p>Is there any way to use <code>*ngFor</code> with custom attributes or non-native attributes on HTML elements?</p>