2

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 &ndash; 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 &ndash; 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).

5
  • angular !== angularjs
    – Claies
    Commented Feb 9, 2018 at 23:21
  • that being said, 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 do data-groups="{{macro.cssClasses}}")
    – Claies
    Commented Feb 9, 2018 at 23:27
  • Funny that you say that. I did try and previously use the method that you described there @Claies but I got a similar error of 'compiler.js:466 Uncaught Error: Template parse errors: Can't bind to 'groups' since it isn't a known property of 'div'' Commented Feb 10, 2018 at 0:37
  • Inerestingly, when I don't try to use binding/interpolation and just manually put in a string value (i.e. data-groups='["animals"]') - this did not cause any errors/failures. Commented Feb 10, 2018 at 0:51
  • Ohhh... @Claies, I finally understand your first statement. Yes I am using Angular AND NOT AngularJS (which is Angular v1). Commented Feb 11, 2018 at 22:54

2 Answers 2

0

Bind your groups like following and it should work

[attr.data-groups]="macro.cssClasses"

I think there are few problems in your code apart from this binding issue:

  • data-groups in shuffjs accepts array of strings but its a string in your appData.json file under cssClasses key.

  • in filter.html use ../../assets/imgs/specimens/thumbs/{{macro.thumbnail}}.jpg instead of ../assets/imgs/specimens/thumbs/{{macro.thumbnail}}.jpg to display your thumbnails

Let me know if it helps.

2
  • Thanks for that suggestion, now working alot better. Yes you are right, my code needs to be cleaned up more and I need to split the cssClasses string into a separate array for it to be used properly. Commented Feb 13, 2018 at 10:21
  • glad to know it helped! Commented Feb 13, 2018 at 12:57
0

Try ng-attr-groups = “{{macro.cssClasses}}” https://docs.angularjs.org/guide/interpolation#-ngattr-for-binding-to-arbitrary-attributes Hope it helps!!

2
  • Thanks but unfortunately I am getting the same error message. :( Commented Feb 11, 2018 at 22:08
  • Can give fiddle or something?
    – Medona
    Commented Feb 12, 2018 at 5:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.