With my app, I currently have only 1 component (the nav) and I have set the CSS for app-root, as well as app-navbar as:
* {
margin: 0;
}
Despite this, the margins persist; I can't even edit them in chrome web development tools in the browser for some reason, The only way I get the margins to disappear is to go the angular root index.html file, and manually enter the style tags there,
Anything else I apply to the * tag (such as font-family) is applied to the entire document, just not margin for some reason,
If anyone knows why you'd save me from ripping any more hair out.
You can add it in app.coponent.css
* {
margin: 0;
}
and set encapsulation: ViewEncapsulation.None in component decorator.
import { Component, ViewEncapsulation } from '#angular/core';
#Component({
selector: 'app-root',
encapsulation: ViewEncapsulation.None
})
By setting ViewEncapsulation to None all the styles apply to the entire document. Or in other words, a component could overwrite styles from another component because its styles are applied to the document head later. Otherwise you can use the global style.css file generated in your directory.
When you create a project with the Angular CLI, the CLI creates a global style file, usually under the name style.ext, where ext is the extension you chose (default to css).
So you should open this default file, let's assume it being style.css, and add those lines in it.
* {
margin: 0;
}
If I were you, I would also add this to this file :
html,
body {
height: 100%;
}
This will prevent you from some errors you could encounter later on, if you want to play with heights (I do this in all of my projects)
Related
I would like to make my window pane unscrollable. If I set my element to overflow: hidden, I can not scroll on any page, so I tried to do it in the CSS file of the component which I want unscrollable. However, the only way I managed achieve this was adding the unscrollable class name to the element of index.html.
.unscrollable{
overflow: hidden;
}
However, in that case, all windows are unscrollable wherever I navigate on the page.
I tried to solve the problem by adding the following only to the component's CSS file:
.unscrollable{
overflow: hidden !important;
}
but to no avail.
Does anyone have an idea on how to solve it? I am very confused by not being able to influence index.html depending on the component, especially since the tag is there.
This can be done by using angular's Renderer2
You can add overflow hidden css from that component to document's body using this.
import like this
import { Renderer2 } from '#angular/core';
then declare in constructor
constructor(private _renderer: Renderer2)
then use it on ngOnInit()
ngOnInit(){
this._renderer.setStyle(document.body, 'overflow', 'hidden');
}
this will add overflow hidden to body and page will be unscrollable.
and then make sure to remove overflow hidden from body on that component destroy use ngOnDestroy() to do that
ngOnDestroy(): void {
this._renderer.removeStyle(document.body, 'overflow');
}
You can make a window sized div non-scrollable like this:
.unscrollable{
width:100vw;
height:100vh;
overflow:hidden;
}
I'm in a situation where I need to use both and tags in this project because in some situations the code breaks if I choose mat-select. But visually the select tag looks plain old ugly.
I tried looking for the CSS in Material Component documentation but wasn't able to find it. Do you guys have any suggestion or actually know where I may find this CSS?
Where to find mat-select classes?
To find them you can use the browser inspector or seeing the master css file:
https://github.com/angular/components/blob/master/src/material/select/select.scss
Globally
If you need to update it globally you can override one or more of those classes according to your need in your style.css.
::ng-deep
You can use ::ng-deep (like ::ng-deep .mat-select-content) to force the override the mat-select style in your component.
::ng-deep .mat-select-panel .mat-option {
padding: 10px;
}
ViewEncapsulation
You can the ViewEncapsulation to None if you want to avoid to inherit the mat-select style imposed by Angular Material in your component.
Component Template
import {ViewEncapsulation } from '#angular/core';
....
#Component({
....
encapsulation: ViewEncapsulation.None
})
Component Style
.mat-select-panel .mat-option {
padding: 10px;
}
I am fairly new to Angular and HTML.
I have two different components, let's say componentAand componentB, both with their repsective .html, .css and .ts files.
In componentA.css, I define some styles, e.g.:
.compA-style {
font-size: 20px;
}
Now in componentB.hmtl, I am using componentA's directive:
<compA></compA>
How can I now change the styles of componentA inside the css file of componentB, without changing the style inside componentA?
Note: I cannot change the style of componentA because I want to use the unmodifed style inside other components, I only want to change for the componentB.
Note: I already tried !important inside componentB.css, i.e. I tried this one:
.compA-style {
font-size: 30px !important;
}
And then in componentB.html:
<compA class=".compA-style"></compA>
But that didn't work.
Angular encapsulates CSS at component level.
This means that even if you have multiple CSS classes with the same name across multiple components, each of those components will use its own class, regardless of the DOM structure.
There are times when you might want to modify a child component styling, though.
You can do this in multiple ways. Let's assume compB contains compA.
::ng-deep
:host {
// ... Other styles
::ng-deep compA {
// ... Custom compA styles
}
}
Explanation: ::ng-deep selector provides cross-component visibility of CSS given its boundaries (wrapper selectors). Whatever you write within ::ng-deep compA will be shared with everything in compA.
WARNING: If you use ::ng-deep at base level in a component styling sheet (without a wrapper), the styles it contains will be spread both up and down across the application (NOT only within current component) and they load whenever the component loads. That is why it's usually wrapped into a :host selector.
Global style sheets
You can write custom styles in application base level styles.css file or create new css files to include at application load (outside Angular environment, for example with a <link> tag in index.html).
They are useful when you have a bunch of styles to overwrite that are the same across the application and don't want to mess with specific component stylesheets too much. Might not always be a good practice.
Add new component stylesheets in styleUrls array in the #Component decorator.
This might not necessarily apply to your case, but it's worth mentioning.
#Component({
selector: 'app-main',
templateUrl: './main.component.html',
styleUrls: ['./main.component.css', '../styles/background.css', '../styles/input.css', '../styles/container.css' /* ... other stylesheets here */]
})
This is a good approach that helps keeping common styles in a single place while not making them global. You can add whatever styles you need to the specific component and split them as needed.
How can I now change the styles of componentA inside the css file of componentB, without changing the style inside componentA?
There is only way to add styles without edit component-A directly.
on componentB.css
:host ::ng-deep compA-style {
font-size: 30px !important;
}
on componentA.html
<compA class="compA-style"></compA>
NOTE: This functionality is deprecated.
Checkout docs ng-deep.
https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep
I'm trying to make a background color for a specific component being display in the whole component page.
It's working fine with
\ ::ng-deep body
background-color: red
But the things is when i do it like that, the body css is bleeding to the other component page, which become red too.
So what i really want to do, is making it local with host.
I tried to use
\:host ::ng-deep body
But it wasn't working too, the body background did not change color until i add a specific body tag to my html file component.
But i don't want to add a body tag because when i do this, the body size is limited to the element in the page.
I also try to use ViewEncapsulation, but it messed up with all my css.
Any help would be appreciate.
Your first issue (As you found out) with ng-deep is that it bleeds into other pages. And because CSS is lazy loaded inside Angular, everything will be fine until you go to that page, and then head to another page and suddenly everything will be red.
Your second issue is that the :host pseudo selector isn't saying "For this page only" it's saying "For everything inside this component".
So as an example :
If I have a component called MyComponent, and I have css like :
:host ng-deep div {
background-color :red;
}
And I have a template like so :
<body>
<app-mycomponent>
<div></div>
</app-mycomponent>
<app-secondcomponent>
<div></div>
</app-secondcomponent>
</body>
Only the div inside app-mycomponent would be red. The div inside app-secondcomponent would not be read. Again, :host allows you to ng-deep only within that component.
So why would you need this? Generally it's because you may use a library that you want to style, so you can place it inside a wrapper component and use ng-deep commands freely with the :host prefix, so only the library component inside that wrapper is styled and the rest of your application is unaffected.
So what's the solution? Well the other issue you have is that the <body> tag is actually outside the scope of your angular app. Typically when I've had to edit the body/html tags as a whole, I've just used plain old javascript.
So for example :
export class AppComponent implements OnInit, OnDestroy {
ngOnDestroy(): void {
document.body.style.backgroundColor = 'transparent';
}
ngOnInit(): void {
document.body.style.backgroundColor = 'red';
}
}
It's not the nicest thing in the world, but it's also not terrible. I mostly have to do this when creating modal components that want to stop the body scrolling etc.
For more reading on NG-Deep bleeding : https://tutorialsforangular.com/2020/04/13/the-dangers-of-ng-deep-bleeding/
And how :host works : https://tutorialsforangular.com/2019/12/24/using-the-css-pseudo-element-host-in-angular/
I would change the color of an icon.
I have imported MdIconRegistry and DomSanitizer
import {MdIconRegistry} from '#angular/material';
import {DomSanitizer} from '#angular/platform-browser';
Than added the SVG to the registry
constructor ( mdIconRegistry: MdIconRegistry, sanitizer: DomSanitizer) {
mdIconRegistry
.addSvgIconInNamespace('img','linkedin',
sanitizer.bypassSecurityTrustResourceUrl('../../assets/icons/linkedin.svg'));
}
In .html file a call the icon
<md-icon svgIcon="img:linkedin" class="contacticon" color="primary"></md-icon>
And modified the color and other parameters in CSS:
.contacticon{
padding: 10%;
fill:currentColor;
color: red;
width: 200px;
height: 200px;
font-size:200px;
}
Neither color:primary nor fill: currentColor; color: red are working.
How can I change the color ?
Update : this is the link of the svg
You have to change the linkedin.svg file itself. Search for this: style="fill:#0077B7;" and exchange the color for currentColor. Then, setting color in your stylesheet will work.
(It is worth noting that the licence associated with the icon does allow its modification. Bat as it is a trademark, check LinkedIns policy about displaying their logo in different colors!)
There are several reasons why the CSS you wrote do not affect the icon.
There might be a more specific CSS rule affecting the icon. To debug this you will need to use something like Google Chrome devtools and inspect the element and check the computed tab. Make sure you check show all then type the property that you want to see from where does it inherit its value (like color orfill`). When you click the arrow it will display the applied value as well as reference to the CSS file you are using.
In Angular 2 when you are calling the SVG this way it might be injecting it as an img tag and this way you will not be able to change its color using fill or color.
If the SVG file itself has classes applied to its elements (like path ... etc) with specific style (like fill property) you will not be able to overwrite it using CSS fill. You need to remove these classes first.
Adding this attribute to md-icon worked for me: style="color:red;font:bold;".
Ex:
<md-icon style="color:red;font:bold;" >clear</md-icon>