I'm building an Ionic app with the latest version (Ionic 3xx and Angular 5) and trying to integrate shuffleJS feature into it for filtering. It worked ok when I used some static data in my template via the 'data-groups' HTML5 attr.
However, when I try to have each item's 'data-groups' be populated by a JSON feed, I get the following error:
Uncaught Error: Template parse errors:
Can't bind to 'data-groups' since it isn't a known property of 'div'.
Here is the HTML template code:
<ion-grid id="container">
<ion-row>
<ion-col col-2 *ngFor="let macro of allMacros" (click)="goToMacroDetailsPage(macro)" class="item">
<div class="item" [data-groups]="macro.cssClasses"></div>
<ion-card>
<img src="../assets/imgs/specimens/thumbs/{{macro.thumbnail}}.jpg"/>
<ion-card-content>
<ion-card-title>
{{macro.title}}
</ion-card-title>
</ion-card-content>
</ion-card>
</ion-col>
</ion-row>
</ion-grid>
</ion-col>
</ion-row>
</ion-grid>
..and an example of the JSON data feed:
},
{
"title": "Caddisfly",
"cssClasses": "nonmicro noshell threepairs notail verySens",
"thumbnail": "caddisfly-th",
"featured_image": [
"caddisfly/caddisfly1",
"caddisfly/caddisfly2",
"caddisfly/caddisfly3"
],
"sensitivity": "Tolerant",
"phylum": "Anthropoda",
"class": "Insecta",
"order": "Trichoptera",
"family": "Twenty-six families",
"size": "1.5 – 40mm",
"habitat": "In sediment, on rocks and branches, and among algae and aquatic plants in streams, ponds and lakes",
"diet": "<strong>Carnivorous, herbivorous</strong> or <strong>detritivorous</strong> depending on species – algae scraped from the surface or surrounding rocks; material filtered from currents using specially constructed conical webs; insects and <strong>crustaceans</strong>",
"features": "Two main types, divided on the basis of behaviour and structure. One group constructs a portable case out of sand, algae, plant material and <strong>silt</strong> (cases often look like sticks) and are generally found in still waters where they feed on algae and plants. The second group does not have a case, or has a fixed retreat. Some are common in fast-flowing water where they feed on other animals (often building a net of silk across the stream to capture their food). Some <strong>species</strong> will swim in their case; most just crawl around. Some of the caseless will move away backwards"
},
I thought 'data-groups' would have been a supported data attribute according to HTML5 standards - https://www.w3schools.com/tags/att_global_data.asp. I can't seem to figure out what I am doing wrong if it is something Angular specific that I must do (i.e. import a module).
data-*
attributes are custom; they are not defined as properties of the element, but they are allowed to exist. You can use interpolation to set their values, but you cannot bind to them. (i.e. you can dodata-groups="{{macro.cssClasses}}"
)