[AngularJS] Re: Need to pass class styles into Angular module/component... anyone have naming conventions they use?

[Sander Elias]

Hi Warwick,

Yes, do it like that, or do it at the top, so all your "settings" are 
accumulated in one single spot (On smaller to medium projects this is what 
I prefer)
Also, it is really easy to set those from within JS, so you might consider 
storing your setting inside a config/json/db, and have some programmatic 
control.

Regards
Sander

-- 
You received this message because you are subscribed to the Google Groups 
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to angular+unsubscr...@googlegroups.com.
To post to this group, send email to angular@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

[AngularJS] Re: Need to pass class styles into Angular module/component... anyone have naming conventions they use?

[Zlatko Đurić]

On Wednesday, February 28, 2018 at 4:05:52 AM UTC+1, Warwick Price wrote:
>
> To enable the parent to still be able to override the styling on these 
> components 
>
>
I think you  might want to reconsider this. CSS works better and is way 
easier to deal with when you work the other way around: have a global 
theeming stylesheet and then only override things in the component if you 
need to. Nothing stops you from having a global CSS file with a theme, and 
then only override locally when you need.

So, e.g. global style:

.dark-badge {
   color: #bfbfbf;
   background-color: #404040
}

and then local style:
.darker-badge { // or just .dark-badge again
  color: #efefef;
  background-color: #101010;
}

Then in your component you have:



As Sander says, view encapsulation is the key here. It makes sure that any 
styles you write in your component *only apply to your component *by 
default. You can let those styles leak, or you can even cheat with things 
like */deep/ .child-class {};* but that is usually done in some edge cases 
you don't know about.

-- 
You received this message because you are subscribed to the Google Groups 
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to angular+unsubscr...@googlegroups.com.
To post to this group, send email to angular@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

[AngularJS] Re: Need to pass class styles into Angular module/component... anyone have naming conventions they use?

[Warwick Price]

Thanks Sander... the custom properties do look interesting. Is your thought 
that the component would just use a custom property and then in the css of 
the parent I'd change the value of that property?

Warwick


On Tuesday, February 27, 2018 at 10:34:17 PM UTC-6, Sander Elias wrote:
>
> Hi Warwick,
>
> Your problem is because of the ViewEncapsulation.Emulated that is default 
> in Angular. There are more options. All come with there own set of perks 
> and privileges. Also, have a look at css custom properties 
> , those might be a 
> way out while following standards. 
>
> Regards
> Sander
>

-- 
You received this message because you are subscribed to the Google Groups 
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to angular+unsubscr...@googlegroups.com.
To post to this group, send email to angular@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

[AngularJS] Re: Need to pass class styles into Angular module/component... anyone have naming conventions they use?

[Sander Elias]

Hi Warwick,

Your problem is because of the ViewEncapsulation.Emulated that is default 
in Angular. There are more options. All come with there own set of perks 
and privileges. Also, have a look at css custom properties 
, those might be a 
way out while following standards. 

Regards
Sander

-- 
You received this message because you are subscribed to the Google Groups 
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to angular+unsubscr...@googlegroups.com.
To post to this group, send email to angular@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.