How to style a AngularDart component using eventually multiple CSS files

The attribute cssUrl and applyAuhtorStyles can both be applied at the same time, as shown below. As you can see, in addition to inheriting the parent styles (bootstrap for example), you can also add component specific styles (cssUrl) that are only available in the component scope.

@NgComponent(selector: 'paginate',templateUrl: 'component/paginate/paginate_component.html',cssUrl: 'component/paginate/paginate_component.css',applyAuthorStyles: true,publishAs: 'ctrl',map: const {  'page-filter-map' : '<=>pageFilterMap'}

)

There are also directives that can be used called cssStyle to add even more control, also shown below.

<span ng-style="{color:'red'}">Sample Text</span>

Ok, here's the answer. To get a css into a component you can either use

1. @import in your css
2. cssUrls parameter -https://github.com/angular/angular.dart/pull/315

If you look here:

https://github.com/angular/angular.dart.tutorial/tree/master/Chapter_04/lib/rating

In the .dart file of the component there is an annotation that contains the attribute cssUrl. I am not sure but I think this couples the file to the encapsulating Web Component css.

@NgComponent(    selector: 'rating',    templateUrl: 'packages/angular_dart_demo/rating/rating_component.html',    cssUrl: 'packages/angular_dart_demo/rating/rating_component.css',    publishAs: 'ctrl',    map: const {      'max-rating' : '@maxRating',      'rating' : '<=>rating'    })

Note that in order for this packages/ link to work you need to have your files in the /lib folder.