We have a web application built using Angular 9. It has colors for headers, borders and some menu backgrounds stored in multiple places in css files.
The ask is to change those as per client branding. So if ClientA logs in, they should start seeing those colors as #FF0000 and if ClientB logs in, they need to see those colors as #00FF00.
Other than inline styling every html with style="color:{{clientColor}} can you help suggest the best way to do this?
Thank you!
You can try to use :root selector and variables in it, and for body tag just overwrite these root variables, working example here: stackblitz
styles.scss:
:root {
--fontColor: #000;
}
.theme-dark {
--fontColor: red;
}
app.component.ts
export class AppComponent {
theme = 'theme-dark';
toggle(): void {
const body = document.body;
if (body.classList.contains(this.theme)) {
body.classList.remove(this.theme);
} else {
body.classList.add(this.theme);
}
}
}
app.component.html
<p>
Start editing to see some magic happen :)
</p>
<button (click)="toggle()">Toggle color font</button>
app.component.scss
p {
font-family: Lato;
color: var(--fontColor);
}
You can use this:
[style.color]="clientColor"
Related
Im trying to edit the mat-dialog-container but Im not able to, I tried with :host::ng-deep and also I look for answers of this and I found that I should be ablo to give it style by adding a class, but the style is not changin, here is the code about what I found
for the style.css file
.custom-dialog-container .mat-dialog-container {
overflow-y: hidden !important;
display: flex !important;
background-color: red;
}
For the ts componen
abrirForm(id:number){
const data = id??null
this.ventana.open(ModalInspeccionComponent,{data:data, disableClose:true,maxWidth: '100vw', panelClass: 'custom-dialog-container'}).afterClosed().subscribe(e =>{
if (e) {
console.log(e);
}
})
}
The dialog opens outside of the component, so styles in the component file will not be applied to it. Place your styles for .custom-dialog-container in your root css/scss file, and they should apply to the dialog then.
Here is a minimal example: https://stackblitz.com/edit/angular-ivy-ggzfwu?file=src/styles.css
Assumed I have created an Angular component called button and I want the user, who implements it in their app to set the color of the button. Is there a other way than using Input() decorators?
The only alternative way that I'm were of is using ng::deep. But remember, this feature will become deprecated soon!
Follows an example of how to use it.
app.component.html:
<my-component>
<another-component>
<div class="buton"></div>
</another-component>
</my-component>
my-component.component.scss:
.someclasse ::ng-deep {
.button {
background-color: white;
}
}
#Input decorator is the best in this situation, for ex. :
button.component.html:
<button class="your-custom-buttom" [ngStyle]="{backgroundColor: color}">Button</button>
button.component.ts:
#Input() color = 'red'
app.component.html:
<app-button color="green"></app-button>
Other way, you could add some specific class to button component, and tell user to change it in styles.scss:
styles.scss:
.your-custom-buttom {
background-color: red;
}
button.component.html:
<button class="your-custom-buttom">button</button>
https://stackblitz.com/edit/angular-dyrn4f?file=src%2Fapp%2Fbutton%2Fbutton%2Fbutton.component.html
In my app, I have movies' details that can be opened, and I want the buttons of the detail to match the movie.
For instance, with the movie "Back to the Future", I have in my data colors = ["#000000","#123123"].
If I do <div [ngStyle]="{'background-color': movie?.colors[0]}"> the div will be of the color I wanted.
My question is, in Ionic, how can I change variables.scss to have these colors (updated when we open a new movie) ?
Because we can't modify tabs with custom css, so I have to add it to variables.scss...
if you want to update any css color or value like font-size like the sass variable at run time use css variables in this way you can update any css property value at run time if it base on css variable like the color in my example but it 's can be any css value
consider this example
style.css
:root {
--color : red;
}
* {
color:var(--color)
}
AppComponent
colorList = ['green', 'blue'];
updateColor(color) {
document.documentElement.style.setProperty(`--color`, color);
}
Template
<button *ngFor="let c of colorList" (click)="updateColor(c)">{{c}}</button>
stackblitz demo 🚀🚀
sass variable are going to compile at build time to there values so they are not reusable at run time
For most use cases, it is convenient to programmatically change the CSS value of an element by mapping it with a variable. We want the CSS value to change every time we update the variable, not only through this.ngZone.run().
<div class="progress" [style.height]=currentLevelPercentage>
This example has shown how we can map the height CSS property of the div element (class progress) to the variable currentLevelPercentage and change its value dynamically. currentLevelPercentage is the variable that must be compulsorily present in the TypeScript file.
For those here to know how to change color of each tab background in super-tabs (ionic) here's my 4 tabs code (I can now change height and width with code too ^^).
in tabs-page.scss :
:root {
--color1: white;
--color2: white;
--color3: white;
--color4: white;
}
super-tab-button:nth-of-type(1) {
background-color: var(--color1)
}
super-tab-button:nth-of-type(2) {
background-color: var(--color2)
}
super-tab-button:nth-of-type(3) {
background-color: var(--color3)
}
super-tab-button:nth-of-type(4) {
background-color: var(--color4)
}
in tabs-page.html : do nothing particular
in tabs-page.ts :
constructor(public navCtrl: NavController, public navParams: NavParams) {
document.documentElement.style.setProperty('--color1', this.movie.colors[0]);
document.documentElement.style.setProperty('--color2', this.movie.colors[1]);
document.documentElement.style.setProperty('--color3', this.movie.colors[2]);
document.documentElement.style.setProperty('--color4', this.movie.colors[3]);
}
Thank you #malbarmawi !
Just an idea about changing style dynamically. here is what i am using
<span [style.width]=foo></span>
Change the value of ‘foo’ in your .ts file
https://angular.io/docs/ts/latest/guide/template-syntax.html#!#style-binding
Simply try this
[ngStyle]="{'background-color': item.color}"
I have a really special issue. I am using AngularTS with C# on serverside and Typescript on clientside.
I want to add to our application the possibility, that the customer can add css styles in a textbox or add file locations (external).
In a custom component I want to add the html code from the official site of the customer. The customer should add the css files or text in order to show the content on our page like the content of the official site.
Unfortunately I could not find a possibility to add the css files.
#Component({
selector: 'customer-footer',
templateUrl: './customer-footer.component.html'
styleUrls: getCSS()})
export function getCSS(): string [] {
var styles: string[] = [];
styles.push("https://");
return styles;}
This doesn't work because AOT is not compatible with static refs.
I tried to add the css Content in styles Tag (Body-Area):
<style type="text/css">
{{footerCSS}}</style>
My best result was to add a Object (css) in ngStyle to the displaying .
<div *ngIf="!fixedBottom"
[innerHtml]="footerHtml"
[ngStyle]="footerCSS"></div>
Unfortunately I could not find a way to convert css code like this one:
.flatWeatherPlugin {
font-size: inherit;
width: 100%;
}
.flatWeatherPlugin p, .flatWeatherPlugin h2, .flatWeatherPlugin h3, .flatWeatherPlugin ul, .flatWeatherPlugin li {
padding: 0;
margin: 0;
color: inherit;
}
To a functional object. Has someone an idea or a helpful message?
In typescript you can use this to load css dynamically
require('css/stylesheet.css')
I recently encountered a.. "thing" in the land of SASS. And maybe you guys know a trick or something alike to "fix" it.
I've got this class .icon. It contains some basic styling for my icons (Used for an iconfont). These icons can then be placed in the markup whereever I want. For example in a button. But inside the button this icon needs some extra styling. So I do the following:
.icon {
// Basic styling
}
button {
.icon {
// Additional styling
}
}
It compiles to this css:
.icon {
// Basic styling
}
button .icon {
// Additional styling
}
Everything OK so far. But now I want to extend the .icon to an after-element inside of all my .foo elements like so:
.foo:after {
#extend .icon;
}
Now it compiles to this css:
.icon, .foo:after { // This is good, exactly what I want
// Basic styling
}
button .icon, button .foo:after { // But I don't need the second half of this line
// Basic Additional
}
Now the foo-element isn't just extending the "root" icon-class but also the icon-class under button and all its additional stylings. But I don't need that. I don't want that element to have that additional styling. It doesn't result in problems yet. But maybe that could happen later. So I was curious if it is possible to extend only the .icon from the root, omitting the nested .icon in the button, and possibly more nested icon-classes in other elements later on.
My first thought was to use an abstact class like %icon and extend from that, but the above mentioned icon-class, and the file that it is placed in, is generated by grunt-webfont. So I can't just change the icon-class styling 'cause its overwritten all the time.
What can I do? Is there some more to the extend function of SASS that I don't know of? Or is there a totally different way?
Thanks for any help.
SOLUTION:
Using all the awesome help and tips I found a way to avoid this problem:
Grunt-Webfont suggests to use the i-tag to display the icons. Font-Awesome does the same. So, I'm doing exactly that. And I usually don't use it for anything else.
This allows it to use the i-tag under the button for my extra styling, and not the .icon class. This way the .icon class is used only once in the generated file and then never again.
.icon {
// Basic styling
}
button {
i { // <= Previously '.icon'
// Additional styling
}
}
Have you tried doing something like this?
.icon {
//some styles from external (ie: grunt webfont)
color: red;
}
%icon {
#extend .icon;
}
button {
.ico {
#extend %icon;
//add some additional styles
}
}
.foo:after {
#extend %icon;
//add some more
}
You would then avoid generating the foo:after rule for the .icon inside the button.
EDIT2 - you'll need to create an additional class which you can use inside your styles, so there's only one .icon class defined (in your grunt-webfont generated css). Then just use the .ico class inside your styles and extend the %icon placeholder like shown above.
EDIT - have you considered solving this problem in your grunt-webfont generator?
From the documentation, it seems you can set the output to scss like so:
options: {
stylesheet: 'scss',
mixinPrefix: 'mixin-'
Then just use the mixin to define the styles of your desired classes?
I think this gets the result you're looking for? Albeit, slightly messily.
The method: make a placeholder style and extend that into .icon to begin with.
%icon-styles{
basic: styling;
}
.icon {
#extend %icon-styles;
}
.foo:after {
#extend %icon-styles;
}
button .icon {
#extend %icon-styles;
additional: styling;
}
It compiles into:
.icon, .foo:after, button .icon {
basic: styling;
}
button .icon {
additional: styling;
}
You can also use custom template with grunt-webfont. It’ll give you much more control on generated CSS.