4

This question is similar but different to this question. For example my normal components include CSS files through webpack styles: [ require("./search.styles") ] where search.styles.css is the style file. Now I have an attribute directive, lets call it expandable search. It has a lot of transitions and styling, this makes setting each style programmatically tedious.

Is there a way to just include the entire CSS file somewhere in the directive?

Update

So to describe the differences, say I have the following template for the component that the attribute directive is used on...

<my-component myDirective>
  <div class="div1"></div>
  <div class="div2"></div>
  ...
</my-component>

If I wanted to say set a background color on each one with the directive (of course in my real world this isn't that simple and style properties needed vary so iteration doesn't really work). If I were using host binding I would have declare a @HostBinding for each element and then maintain each style through code. This would be a lot of work and I would like to avoid it.

Community
  • 1
  • 1
Jackie
  • 21,969
  • 32
  • 147
  • 289
  • 1
    It seems like the exact same question. Could you clarify how it is different? – Aluan Haddad Mar 10 '17 at 15:40
  • The answer to this question is to use hostbinding to set the individual styles this is really not going to work for me as there are just a massive amount of styling and would be hard to maintain. If I could use the host bindings to set multiple child elements at the same time (preferably through CSS). – Jackie Mar 10 '17 at 16:01
  • 2
    I think it is a missing framework feature. – Aluan Haddad Mar 10 '17 at 16:02
  • fair enough then what is the hacky way :-) – Jackie Mar 10 '17 at 16:09
  • 2
    If you add CSS to a component it styles the components view. A directive doesn't have a view. You can add CSS to the `` element though. – Günter Zöchbauer Mar 10 '17 at 16:10
  • @GünterZöchbauer then you could just put all of the styles in a specific class and apply that class to the decorated html element. – Aluan Haddad Mar 10 '17 at 16:12
  • @GünterZöchbauer can I use a host binding to grab the view resolver (?) and inject it as a CSS string that way? – Jackie Mar 10 '17 at 16:15
  • Um, I can't see the benefit – Günter Zöchbauer Mar 10 '17 at 16:16
  • Angular compiles and rewrites the styles. I doubt such hacks will work, but I don't have deep knowledge of such internals. – Günter Zöchbauer Mar 10 '17 at 16:18
  • Haha fair enough so how would you manage a style intensive (say 500 lines of css) on a directive. I guess I could rethink things and make a separate component, but in my case that doesn't fit the metaphor very well IMHO. Because I am "decorating" the existing component with new styling in more of a mixin sort of way. Not really extending the component as a whole. So I might have a regular search, a expandable search, a dark search, and an expandable dark search. – Jackie Mar 10 '17 at 16:18
  • I would just add the styles to head and control what is applied with class bindings. – Günter Zöchbauer Mar 10 '17 at 16:52
  • That is great until I turn on Native shadow DOM then it breaks. Which is another thing I am trying to avoid as much as possible. – Jackie Mar 10 '17 at 16:58
  • Possible duplicate of [Angular2 Styles in a Directive](http://stackoverflow.com/questions/35915433/angular2-styles-in-a-directive) – Manube Mar 10 '17 at 17:35
  • @Manube I explained in the post why it was different and even linked to that question. Did you read the post? – Jackie Mar 10 '17 at 17:44
  • @Jackie I did, but I am still not convinced – Manube Mar 10 '17 at 17:46
  • What part are you not convinced about I can't manage 500 styles doing it that way. If you can provide a manageable plunker that does that with the answer provided I will be more than happy to delete. Even a small number like 20 style properties would be a more reasonable plunker – Jackie Mar 10 '17 at 17:48
  • I understand your legitimate frustration; maybe you should suggest the Angular guys to provide additional features in a future version. However, as Günter commented in the answer you provided a link to: "This is what Angular provides. Only components support adding stylesheets". – Manube Mar 10 '17 at 18:00
  • @Manube I appreciate that but I am also not convinced there are not ways to do this with the view classes (like resolver etc). So while I agree there is no supported solution, I don't buy that there isn't a creative one. – Jackie Mar 10 '17 at 18:30

0 Answers0