3

I am using snipcart.com as my ecommerce/payment processor. However, when making simple HTML button, I am getting an error:

<button
    class="snipcart-add-item"
    data-item-id='{{id}}'
    data-item-name='{{listing.name}}'
    data-item-price='{{listing.price}}'
    data-item-weight="20"
    data-item-description="Random Description">
    Add To Cart
</button>

Alternatively, I have also tried this:

<button
    class="snipcart-add-item"
    [data-item-id]='id'
    [data-item-name]='listing.name'
    [data-item-price]='listing.price'
    data-item-weight="20"
    data-item-description="Random Description">
    Add To Cart
</button>

Both of these give the same error. The error says: Can't Bind to "data-item-id" Since it Isn't a Known Property of "Button" Angular 2. An error is produced for each input I am trying to bind to.

Lastly, here is a link to the Snipcart docs: https://docs.snipcart.com/configuration/product-definition

Zain Merchant
  • 104
  • 1
  • 10
  • 6
    You can try with `[attr.data-item-id]="id"` (and the same for the other data attributes) (see [this answer](https://stackoverflow.com/a/34542844/1009922)). – ConnorsFan Feb 22 '18 at 17:19
  • Possible duplicate of [Angular 2 data attributes](https://stackoverflow.com/questions/34542619/angular-2-data-attributes) – ConnorsFan Feb 22 '18 at 17:20
  • Thank you @ConnorsFan. I didn't realize that super easy fix. – Zain Merchant Feb 22 '18 at 17:22

0 Answers0