How to style a AngularDart component using eventually multiple CSS files

Question

I was wondering what is the best way to style AngularDart components? I'd like to be able to split base styles into a separate CSS file and then just include it somehow (maybe @import, if angular dart supports it) in my component.

Standard NgComponent allows me to add only once CSS file, as in the following example:

@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'
})

What if my CSS is somehow split across multiple files, how do I include all of them in a component?

At the moment, I'm starting to notice that although AngularDart components help with making components reusable, they are not the most maintainable - there's lots of copy paste in CSS. If it was possible to split the styles the components would be a lot more maintainable (i.e. One can include base styles in multiple components - instead of copy-pasting them across every css file for each component).

What is the best way to structure components and css within AngularDart environment?

Answer 1

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

Answer 2

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>

Answer 3

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.