AngularDart How to Create Component

Question

I just started to learning from this tutorial: https://github.com/angular/angular.dart.tutorial/wiki/Creating-a-Custom-Component

I'm just stucked with a problem, and looking for some help. The rating component does not show for me, none of the methods called (at least not at any breakpoint). Here you can see the code: https://www.dropbox.com/s/oizzl9k6nclgoqd/SecondAngularDart.zip

Please help me with some guidence, how can I debug a situation like this? Or what the problem is?

@NgComponent(
  selector:'rating',
  templateUrl:'rating_component.html',
  cssUrl:'rating_component.css',
  publishAs:'cmp'
)
class RatingComponent {
  static const String _starOnChar = "\u2605";
  static const String _starOffChar = "\u2606";
  static const String _starOnClass = "star-on";
  static const String _starOffClass = "star-off";

  List<int> stars = [];

  @NgTwoWay('rating')
  int rating;

  @NgAttr('max-rating')
  int maxRating(String max) {
    stars = [];
    var count = max == null ? 5 : int.parse(max);
    for(var i=1; i <= count; i++) {
      stars.add(i);
    }
  }

  String starClass(int star) {
    return star > rating ? _starOffClass : _starOnClass;
  }

  String starChar(int star) {
    return star > rating ? _starOffChar : _starOnChar;
  }

  void handleClick(int star) {
    if (star == 1 && rating == 1) {
      rating = 0;
    } else {
      rating = star;
    }
  }
}

score 1 · Answer 1 · answered Feb 02 '14 at 04:32

1

You have annotated a function with @NgAttr('max-rating'). Those data-binding annotations only work with fields or setters:

@NgAttr('max-rating')
set maxRating(String max) {
  stars = [];
  var count = max == null ? 5 : int.parse(max);
  for(var i=1; i <= count; i++) {
    stars.add(i);
  }
}

Also, in starClass and starChar you access rating, which could be null:

String starClass(int star) {
  if (rating != null) {
    return star > rating ? _starOffClass : _starOnClass;
  }
}

answered Feb 02 '14 at 04:32

Ozan

4,345
2
23
35

Thank you for the help, it's a step forward, but it still does not work. I have a feeling the rating_component.html is not loaded correctly. Even if I change ng-repeat="star in cmp.stars" line to something like ng-repeat="star in cmpy.stars2", no error at all... like it's not processed at all. Besides starClass and starClass methods aren't called at all. – gabor.orosz Feb 02 '14 at 10:19
According to Chrome DevTools / Source, the components from @NgComponent( selector: 'rating', templateUrl: 'rating_component.html', cssUrl: 'rating_component.css', publishAs: 'cmp' ) aren't loaded. What do you think, what's wrong? – gabor.orosz Feb 02 '14 at 10:46

score 1 · Accepted Answer · answered Feb 02 '14 at 13:55

1

Okay, it was a beginner mistake, but I used the component this way:

<rating max-rating="5" rating="{{ctrl.selectedRecipe.ratings}}"></rating>

But should be used this way:

<rating max-rating="5" rating="ctrl.selectedRecipe.ratings"></rating>

answered Feb 02 '14 at 13:55

gabor.orosz

433
8
20

AngularDart How to Create Component

2 Answers2