How to style a AngularDart component using eventually multiple CSS files

Issue

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?

Solution

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

Answered By – markovuksanovic

Answer Checked By – Pedro (FlutterFixes Volunteer)

Leave a Reply

Your email address will not be published.