I tried use
#Component({
selector: 'about',
template: './about.hmtl',
styles: ['.block {background-color: red} ...'] // <-- This will generate css modules
})
This works fine, angular expands every class with attribute selector and give every DOM element unique attribute. But will application load fast when will be a lot of css modules(for example 20 components and about 100 lines CSS code for every component)?
When it comes to component css you don't want to have any duplication, it duplication and its a pain to maintain. Would recommend that you find the top most component or the parent component that contains all the child component you want to style and define your styles one. Use an external file or define them inline its up to you. Then within the component decorator set the encapsulation property to ViewEncapsulation.None that will mean that all the child component will inherit the parent components styles and you can maintain one bit of css rather than having it all over the place.
Related
i have 2 types of component, i) before login ii) after login
want to add 2 different css for both parent component,
with using ViewEncapsulation.None it apply in sibling component also, here is the structure of code
- ParentComponent1
- ChildCompoent1.1
- ChildCompoent1.2
- ParentComponent2
- ChildCompoent2.1
- ChildCompoent2.2
if i add CSS in ParentComponent1 then it only apply in ChildComponent1.1 and ChildComponent1.2 not in 2.1 and 2.2, same thing apply in ParentComponent2
is there any way to remove ViewEncapsulation.None or apply CSS only in child component not in Sibling component
You can use Emulated encapsulation
encapsulation: ViewEncapsulation.Emulated,
Similar to ViewEncapsulation.None, Angular adds the styles for this component to the head of the document, but with "scoped" styles.
Therefore, only the elements directly within this component's template will match its styles. Since the "scoped" styles from the EmulatedEncapsulationComponent are very specific, they override the global styles from the NoEncapsulationComponent.
I'm relatively new to Angular, and I have a doubt about component stylesheets.
I have an Angular 12 app and created a component named my-component. The template of the component in question is something like this:
my-component.html
<div>
...some html...
<some-other-angular-component></some-other-angular-component>
...some other html...
</div>
some-other-angular-component is another component, either from the app itself or a third party library.
Now, what I want to do in my-component is apply some CSS rules to the contents of some-other-angular-component. I know that the HTML it generates contains classes that I can target, so I tried to add this to my component CSS:
my-component.scss
.some-other-angular-component-inner-class {
background-color: red;
}
However, this doesn't work, it appears that the component's CSS file only applies rules to the HTML defined directly in the component's template, not the HTML generated by sub-components.
Is there a way to make this work? I find myself having to add my CSS to the webapp's main style.scss file, even when I want to apply the rule only to the particular some-other-angular-component instance inside of my-component. It makes styling confusing and needlessly fragmented. Is this intended, or what am I missing?
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.
I'm relatively new to angular. In the process of converting a React app to Angular just for learning purposes. I have a parent component that has a button (Custom Button Component). This button when loaded in the parent should be hidden and on hover should show the button. So you probably get an idea that I have some CSS selectors related to the parent component that override the child CSS. First should be display: none and then on hover I change it to display: flex
So the first problem I encountered was that I could not override the child CSS from the parent CSS. After reading all kinds of posts I moved the CSS overrides from the parent CSS to the global stylesheet and also added encapsulation: ViewEncapsulation.None to the child component.
Next thing I noticed is that the align-items: center was not working on the child. First thought I had that guess I have to add that part to the global styles also? but what I really need to know is that is this the norm in Angular? If yes, then some things don't make sense to me. These styles are really not global. They are only related to the parent component then it seems kind of weird to add those to the global stylesheet.
In regards to the align-items not aligning the child (custom-button), I believe that happens because of the extra div being added around the button. So how do you handle such situations?
Appreciate any advice/tips.
Thank you!
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....
Angular have the concept of ViewEncapsulation. By default, the value is set to ViewEncapsulation.Emulated and the css you put in the component is specific to the component and only to this component. The CSS will not be applied to the child components.
You can switch to ViewEncapsulation.None and you will disable this behavior and all the css rules in your css file will be applied to all your components in the application, and maybe you don't want this behavior. That's why I advice you to leave this option.
The other option you got is to put your specific css rule in src/style.css (if you didn't modify the default path). All css rules put in this file will be applied for all the application and you can keep the ViewEncapsulation of your component.
For align-items, i think you are right : the app-custom-button is wrapping your button, so you need to set a width: 100% to your button, then eventualy resize your app-custom-button
I'm trying to remove the arrow from an angular material select component.
To do that I have a custom CSS file where I say display: none.
Here is the code:
https://stackblitz.com/edit/angular2-remove-select-arrow
but as my CSS is custom for this component, I saw there's no unique identifier generated for the arrow div so CSS is not applied.
Can you please let me know what would be the best way to do achieve that?
Thanks for your help.
Mike
When you state the styles in a component's CSS file, custom attributes are added to it automatically, so that CSS is not applied outside of the current component. But that causes issues when you want to apply CSS to other components, in this case, mat-select.
There are two ways to solve this issue
Set encapsulation to none in component
#Component({
selector: 'select-form-example',
templateUrl: 'select-form-example.html',
styleUrls: ['select-form-example.css'],
encapsulation: ViewEncapsulation.None,
})
export class SelectFormExample {
}
Add the custom styles in style.css file instead of the component's CSS file
select-form-example.css
I have updated the stackblitz with 1st step
Use ::ng-deep in your case but note that this one is already deprecated.
Now your css rule becomes like this: ::ng-deep .staffing-cell .mat-select-arrow-wrapper
Deprecation info: https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep
Now for the "appropriate" way you need to leverage the material theming in which you can look up in their docs: https://material.angular.io/guide/theming
I'm working on an angular 4 project and I'm trying to override css in a specific component. My changes also show up after compiling but they are not affecting the element. The element sits in a parent component, but I already tried using :host.
Element:
Generated CSS:
I had this same problem and I found out you can style your children component from its parent. The generated css never match what you want. See the picture.
I solved it by passing a state info(expanded #input attr) to the child component and styling it according to this state value as so:
Image illustrating my point
...