Load external CSS into component
See also https://angular.io/docs/ts/latest/guide/component-styles.html
View encapsulation
To allow external styles to affect the content of components you can change view encapsulation (that's what prevents styles to "bleed into" components).
@Component({
selector: 'some-component',
template: '<div></div>',
styleUrls: [
'http://example.com/external.css',
'app/local.css'
],
encapsulation: ViewEncapsulation.None,
})
export class SomeComponent {}
View encapsulation fulfills a purpose. The better way is to add styles directly to the component they should affect. ViewEncapsulation
is set per component and may come handy in some situations.
"shadow piercing"
You can also use shadow piercing CSS combinator ::ng-deep
(>>>
and /deep/
are deprecated) to build selectors that cross component boundaries like
:host ::ng-deep .ng-invalid {
border-bottom: solid 3px red;
}
- update
::slotted
is now supported by all new browsers and can be used with `ViewEncapsulation.ShadowDom
https://developer.mozilla.org/en-US/docs/Web/CSS/::slotted
which styles all tags with a class ng-invalid
in the current component or any descendant with a red underline no matter if encapsulation is None
or Emulated
. It depends on browser support whether /deep/
works with Native
(as far as I know this is not supported by any browser anymore).
Note
The shadow piercing CSS combinators are similar to the ones from the shadow DOM spec where they are deprecated since quite a while.
With the default ViewEncapsulation.Emulated
Angulars own /deep/
and ::shadow
implementation are used and they will work even when Chrome removes native support.
With ViewEncapsulation.Native
Angular uses Chromes shadow DOM CSS combinators (only Chrome supported them at all anyway AFAIK). If Chrome finally removes them, then they won't work in Angular as well (again ViewEncapsulation.Native
only).
Global styles
Styles added globally (index.html
) don't consider component boundaries. Such styles are not rewritten by Angular2 and ViewEncapsulation.Emulated
doesn't apply to them. Only if ViewEncapsulation.Native
is set and the browser has native shadow DOM support, then global styles can't bleed in.
See also this related issue https://github.com/angular/angular/issues/5390
How to set different css class based on screen size in Angular?
You can add hostlistener
to your component.
public size700_1020 = false;
public size400_700 = false;
@HostListener('window:resize', ['$event'])
onResize(event) {
alert(window.screen.availWidth);
alert(window.screen.availHeight);
if(window.innerWidth < 700 && window.innerHeight < 1020) {
// now based on the screen size you want to check
// enable the variable and make it true
// based on it, you can enable the class in template
}
}
In template:
<div class="size700_1020 ? 'addThisClass' : 'elseThis'"></div>
There are multiple properties for your requirement on window
object. I am attaching some links which might give you more ways here1 and here2.
You can also do this.
import { Platform } from 'ionic-angular';
...
private width:number;
private height:number;
constructor(private platform: Platform){
platform.ready().then(() => {
this.width = platform.width();
this.height = platform.height();
});
}
As per the changes made in the question:
<button [ngClass]="miniClass ? 'addMiniClass':'extendedClass'" class="mdc-fab mdc-fab--touch ">
<div class="mdc-fab__ripple"></div>
<span class="material-icons mdc-fab__icon">mail</span>
<!-- <span class="floating-span">My Invite Link</span> -->
<div class="mdc-fab__touch"></div>
How to adjust import order of .css files in Angular
You need to change to,
"styles": [
"styles.css"
],
Then,
Link all CSS files in styles.css.
Include all files at the top of the styles.css file.
@import url('~bootstrap/dist/css/bootstrap.min.css');
@import url('deeppurple-amber.css');
@import url('~@angular/material/prebuilt-themes/deeppurple-amber.css');
@import url('another_css_file_from_angular_material.css');
@import url('app.component.css');
@import url('current-vehicle.component.css');
I hope this will work.
Apply different css stylesheet for different parts of the same web page
You can't apply different stylesheets to different parts of a page. You have a few options:
The best is to wrap the different parts of the page in divs with class names:
<div class='part1'>
....
</div>
<div class='part2'>
....
</div>
Then in your part1 CSS, prefix every CSS rule with ".part1 " and in your part2 CSS, prefix every CSS rule with ".part2 ". Note that by using classes, you can use a number of different "part1" or "part2" divs, to flexibly delimit which parts of the page are affected by which CSS rules.
Style.css of Angular not applying to certain Component
Try to remove styles from the your.component.css
which overlapps in styles declared in styles.css
and all global styles should be applied.
Or you override your styles in styles.css
by declaring new classes which are placed lower than your desired styles.
Some your global styles are not applied because of CSS specifity rule.
Read a great article at mdn about CSS speicifity.
Try to avoid using !important
keyword by using CSS specifity rules. It's almost never a good idea to use !important
.
UPDATE:
Chrome Developer tools shows that CSS properties 'trans-msg-his-dialog' are overridden. It can be seen by struck-through lines at CSS properties.
You can see which properties won by clicking
Computed style
tab:Or try to move these styles to the bottom of
style.css
file:.content-body a {
cursor: pointer;
text-decoration: none;
color: #4c90c7
}
.content-body a:hover {
color: #346092;
}
.content-body a:visited {
text-decoration: none;
color: #4c90c7
}
UPDATE 1:
Now we know that Bootstrap style has too strong selectors and overrides your anchor:
a:not([href]):not([tabindex]) {
color: inherit;
text-decoration: none;
}
We see that if <a>
tag does not have href
or tabindex
attributes, then it will have color: inherit
and text-decoration: none;
. So try to add href
attribute to your anchor tag:
<a href="javascript:;">Button</a>
How to style child components from parent component's CSS file?
Update - Newest Way
Don't do it, if you can avoid it. As Devon Sans points out in the comments: This feature will most likely be deprecated.
Last Update
From Angular 4.3.0 till even now (Angular 12.x), all piercing css combinators were deprecated. Angular team introduced a new combinator ::ng-deep
as shown below,
DEMO : https://plnkr.co/edit/RBJIszu14o4svHLQt563?p=preview
styles: [
`
:host { color: red; }
:host ::ng-deep parent {
color:blue;
}
:host ::ng-deep child{
color:orange;
}
:host ::ng-deep child.class1 {
color:yellow;
}
:host ::ng-deep child.class2{
color:pink;
}
`
],
template: `
Angular2 //red
<parent> //blue
<child></child> //orange
<child class="class1"></child> //yellow
<child class="class2"></child> //pink
</parent>
`
Old way
You can use encapsulation mode
and/or piercing CSS combinators >>>, /deep/ and ::shadow
working example : http://plnkr.co/edit/1RBDGQ?p=preview
styles: [
`
:host { color: red; }
:host >>> parent {
color:blue;
}
:host >>> child{
color:orange;
}
:host >>> child.class1 {
color:yellow;
}
:host >>> child.class2{
color:pink;
}
`
],
template: `
Angular2 //red
<parent> //blue
<child></child> //orange
<child class="class1"></child> //yellow
<child class="class2"></child> //pink
</parent>
`
Related Topics
Ie7 Cause of "Text - Empty Text Node"
CSS: Opacity Only Background, Not The Text Inside
Resize Images as Viewport Resizes Without Sides Being Cut Off
How to Change The Text Color of The Selected Row in Material UI Table
Make Position: Fixed Behavior Like Sticky (For Vue2)
Rails: Precompiled Assets Missing Node Modules
CSS Issue Ngx-Table Angular2 Swimlane
How Automatically Adjust Div's Width Using CSS
Why Does a Media Query with a Smaller Min-Width Overwrite a Larger One
Offering Smaller Versions of Videos with Media Query or When Mobiles Are Detected
Fill Element with Slanted Background on Hover
Why Is This Page Layout Breaking When an Anchor Link Is Used
How to Make Entire Div Change Color on Hover Using CSS
Vertical Align Inside CSS Grid
Vscode - Change Highlight Color of Current File