Angular 2 share the same css file across the module
Yes you can. Simply create a file, shared.scss
for example. Now you can import it in you components style: @import './styles/shared.scss';
You could also add it to your styleUrls
in your component.
change app.components style from different component in angular 2
You should avoid directly calling component's methods if you can, to reduce coupling. You can use a shared service based on observables.
service
import {Injectable} from '@angular/core';
import {Observable, Subject} from "rxjs";
@Injectable()
export class MessageService
{
private mySubject: Subject<any> = new Subject<any>();
public readonly stylesChanged$: Observable<any> = this.mySubject.asObservable();
brodcastStylesChanged(styles)
{
this.mySubject.next(styles );
}
}
component2
this.messageService.brodcastStylesChanged(styles);
component1
this.messageService.stylesChanged$.subscribe(styles=> {
this.styles= styles;
});
Apply css style to all components in Angular 2 app
Probably you should declare global css rules in your html or external stylesheet.
Angular - How To Organize CSS Overrides Across Components For The App
You can overwrite children CSS classes from the parent componet. this is the way:
Assuming your child component have this CSS
.child-class {
background-color: blue;
}
When you use this component the background color will be blue. But if you want to change that color to RED. In the parent component where you want the change you need to do this:
In your parent component
:host {
::ng-deep{
.child-class {
background-color: red;
}
}
}
:host this refers to the component's HTML tag (that is created by Angular, in your case the tag of the component that contains the app-custom-button). Also you can apply css to the component tag.
for example:
:host{
width: 100vw;
height: 100vh
}
And with ::ng-deep you can overwrite ALL styles inside your compoent. Does not matter if is a style from your child compoenent, grandchild, great-great-grandson, etc... even if its a component from an external library.
So... For example you can have the "custom background color as blue" then in one component you can keep that color but in other component you can change the color to red and in other component you can change the color to green....
Make Angular component stylesheet work with sub-components
I think you may want to look into View Encapsulation.
@Component({
selector: 'app-no-encapsulation',
template: `
<h2>None</h2>
<div class="none-message">No encapsulation</div>
`,
styles: ['h2, .none-message { color: red; }'],
encapsulation: ViewEncapsulation.None,
})
export class NoEncapsulationComponent { }
These styles will be added to head and will be applicable to other components as well if style rule matches.
Please note, with this you are only enabling this behaviour for just this component. Chances of overlapping CSS rules is still there but is lot less in comparison to directly putting styles in style.css
.
I will also suggest that you add .class
or #id
attribute in mark up to ensure that your rules don't overlap by default.
For example:
.my-component .rule-one {
}
It will ensure that my rules are only applied are on component that has this class applied on it.
Angular: Component styles do not cascade to sub-components?
Angular components use view encapsulation. This is by design so that components are reusable across applications. To treat a component's styles as global, set the view encapsulation mode to none
(not recommended).
Instead of using none
, register global style files in the Angular CLI styles section, which is pre-configured with the styles.css
file.
Component CSS styles are encapsulated into the component's view and don't affect the rest of the application.
To control how this encapsulation happens on a per component basis, you can set the view encapsulation mode in the component metadata. Choose from the following modes:
ShadowDom
view encapsulation uses the browser's native shadow DOM implementation (see Shadow DOM on the MDN site) to attach a shadow DOM to the component's host element, and then puts the component view inside that shadow DOM. The component's styles are included within the shadow DOM.
Native
view encapsulation uses a now deprecated version of the browser's native shadow DOM implementation - learn about the changes.
Emulated
view encapsulation (the default) emulates the behavior of shadow DOM by preprocessing (and renaming) the CSS code to effectively scope the CSS to the component's view. For details, see Appendix 1.
None
means that Angular does no view encapsulation. Angular adds the CSS to the global styles. The scoping rules, isolations, and protections discussed earlier don't apply. This is essentially the same as pasting the component's styles into the HTML.To set the components encapsulation mode, use the encapsulation property in the component metadata:
src/app/quest-summary.component.ts
// warning: few browsers support shadow DOM encapsulation at this time
encapsulation: ViewEncapsulation.Native
ShadowDom
view encapsulation only works on browsers that have native support for shadow DOM (see Shadow DOM v1 on the Can I use site). The support is still limited, which is why Emulated
view encapsulation is the default mode and recommended in most cases.
External and global style files
When building with the CLI, you must configure the
angular.json
to include all external assets, including external style files.Register global style files in the styles section which, by default, is pre-configured with the global
styles.css
file.See the CLI wiki to learn more.
Related Topics
How to Stop User Agent Stylesheets from Overriding My CSS
Are There Specific CSS Selectors Targeting Ie10
@Font Face Choppy Font in Chrome
Css: Full Size Background Image
Why Does User Agent Stylesheet Override My Styles
CSS Styling - How to Put These Two Div Boxes Adjacent
Chrome 83: Change Colors of New Form Styling
Background Gradients in IE7 with CSS
My Custom Font Doesn't Want to Work in Internet Explorer
Can You CSS Blur Based on a Gradient Mask
Customize a Select with Font-Awesome
How to Inline Less Stylesheets