Apply css style to all components in Angular 2 app
Clash Royale CLAN TAG#URR8PPP
Apply css style to all components in Angular 2 app
I have very basic, and reusable css rules, such as:
.ng-invalid
border-left: 5px solid #a94442;
.ng-valid
border-left: 5px solid #42A948;
I'd like to re-use these for all of my components. If I place this in my root AppComponent, which is the one that is bootstrapped by Angular, then it's not recognized by any other components in my application other than the AppComponent.
AppComponent
AppComponent
I must be missing something very obvious here.
7 Answers
7
Probably you should declare global css rules in your html or external stylesheet.
Guess I was thinking too Angular about this. Yes, you're right haha.
– mariocatch
Apr 14 '16 at 20:47
Angular adds unique classes to your component and rewrites the selectors of CSS added to components to only match that components unique class, before adding the CSS to the <head>. This is to emulate shadow DOM style encapsulation.
<head>
You can work around it by
set encapsulation: ViewEncapsulation.None which prevents rewriting styles for components where encapsulation is disabled
encapsulation: ViewEncapsulation.None
add the CSS to the index.html directly. Angular doesn't rewrite CSS that is not added to components.
index.html
use "shadow piercing CSS combinator" ::ng-deep someSelector ... which also makes the CSS ignore the unique classes added to the components.
::ng-deep someSelector ...
But what if you want to apply the styles to all components used inside a component? For example, assume I'm writing an app Car-Factory there is a
CarComponent which uses TransmissionComponent. Now I want to use bootstrap CSS in CarComponent and also in TransmissionComponent. I can set the ViewEncapsulation to None, but that applies the styles to entire Car-Factory which is not desired. And also, there is no index.html file at the CarComponent level– Aditya Vikas Devarapalli
Apr 11 at 2:50
CarComponent
TransmissionComponent
CarComponent
TransmissionComponent
ViewEncapsulation
None
index.html
CarComponent
@AdityaVikasDevarapalli
:host ::ng-deep child-comonent ... – Günter Zöchbauer
Apr 11 at 2:56
:host ::ng-deep child-comonent ...
Thanks, @Günter, but my use case here is to apply a stylesheet at the
:host level, not just one particular style. Is there some way to import a stylesheet for :host ?– Aditya Vikas Devarapalli
Apr 11 at 3:14
:host
:host
@AdityaVikasDevarapalli you can add styles to
@Component({selector: 'my-foo', styleUrls: [...]– Günter Zöchbauer
Apr 11 at 3:18
@Component({selector: 'my-foo', styleUrls: [...]
@AdityaVikasDevarapalli if it contains
:host ::ng-deep transmission-comonent ... it will affect that too.– Günter Zöchbauer
Apr 11 at 3:21
:host ::ng-deep transmission-comonent ...
You can achive this my changing your style to
:host .ng-invalid
border-left: 5px solid #a94442;
:host .ng-valid
border-left: 5px solid #42A948;
and in your child components you can set property of encapsulation: ViewEncapsulation.None (but by default it is ViewEncapsulation.None so you may no need to set also).
encapsulation: ViewEncapsulation.None
so now you should be able to user your style class in your all child components.
Demo : http://plnkr.co/edit/ALgOw3FHmW8RsClI8Nnb?p=preview
In my opinion you should agree to a particular strategy in this regards across your whole team.
E.g. you could set encapsulation: ViewEncapsulation.None just like @sreeramu mentioned in his reply. But only for app (root) component.
encapsulation: ViewEncapsulation.None
You should take advantage of CSS encapsulation as much as you can so turning it off for several components is kinda smelly. But applying it only to one component might work fine.
You can write your CSS inside src/styles.css
or you can create your new CSS file and specify inside .angular-cli.json file
"apps": [
"styles": ["styles.scss"]
]
From a command line run:
npm install file-loader style-loader --save-dev
Now in webpack.config.js add the following line to the loaders array:
svg)/, loader: 'file-loader'
Now in your app.component.ts, after your import statements, add the following line:
require('style!bootstrap/dist/css/bootstrap.css')
This assumes you are using the latest version of angular2/angular2-seed located here: https://github.com/angular/angular2-seed as of Nov 8 2016
For angular apps created with @angular/cli, css needed for all components can be put in styles.css file which is present in src directory.
@angular/cli
styles.css
src
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
For me, I needed to apply CSS definitions on BODY, HTML and so on, and in the current app I could do it only from within internal components, so I just added these defitions under ::ng-deep and it worked like a charm. This way it also insures that it will take place only when my modules are initialized and running in the app, not affecting other modules, as part of the way Angular works with encapsulated CSS...
– TheCuBeMan
Jul 4 at 9:46