I want to add internalization in my app. So I have a JSON file with all my values.
HTML side I manage to retrieve the values but css side I use a before.
In my HTML i use the class "menu-input" available right here :
<div class="header">
<app-game class="menu-input" [gameId]="gameId"></app-game>
<h1>{{'GAME.TITLE' | translate}}</h1>
</div>
This class is called in my scss file where I add a before :
.menu-input {
user-select: none;
display: block;
&::before {
content: 'Partie : ';
}
For the moment the content of my before is not yet translated. The goal is to transform my content with the value {{'GAME.NAME'}}
You can use css variables to solve this.
Working example: https://stackblitz.com/edit/angular-oaxdve?file=src%2Fapp%2Fapp.component.html
Taking in account reusability, you can define variables in your styles.css / scss:
:root {
--custom-text: 'Default';
--custom-text-2: 'Default';
}
And in your local css file you make use of the above variables like:
div::before {
content: var(--custom-text);
}
Then on app load or language change you get your translated text and go over the list of 'custom-text' options and set them using:
document.documentElement.style.setProperty('--custom-text', "'Hello'");
Does anyone know how can I change mat-spinner color in Angular Material?
Overriding css doesn't work. I tried changing color in material files but they can only be imported, I can't change anything there.
I want it to be my custom color, not color from prebiult-themes.
Use this code for ** < mat-spinner >** add this code in your .css file
.mat-progress-spinner circle, .mat-spinner circle {
stroke: #3fb53f;
}
This answer will work for those who're looking for a flexible solution in Angular 4 / 6 / 7. If you wan't to change the color of a mat-spinner at a component level, you'll need to use the ::ng-deep selector. Knowing this, the solution is quite easy.
In your html file:
<div class="uploader-status">
<mat-spinner></mat-spinner>
</div>
In your css / scss file:
.uploader-status ::ng-deep .mat-progress-spinner circle, .mat-spinner circle {
stroke: #000000;
}
Notice that the .uploader-status css class encapsulates the component. You could just use ::ng-deep without using a class but then whatever changes you're doing to the mat-spinner will appear in other areas of the application. Check this to learn more.
Easy Fix!
Add custom css rules inside styles.css instead of component.css file
.mat-progress-spinner circle, .mat-spinner circle {
stroke: #2A79FF!important;
}
To your .css/.scss component file style add (it will works locally - in component only)
:host ::ng-deep .mat-progress-spinner circle, .mat-spinner circle {
stroke: #bada55;
}
If you don't want to mess around with the global css and need a way to set the spinner to different colors in different areas of your app, I would strongly recommend to create a directive for it.
import { Directive, Input, ElementRef, AfterViewInit } from '#angular/core';
#Directive({
selector: "[customSpinner]"
})
export class CustomSpinnerDirective implements AfterViewInit{
#Input() color: string;
constructor(
private elem: ElementRef
){}
ngAfterViewInit(){
if(!!this.color){
const element = this.elem.nativeElement;
const circle = element.querySelector("circle");
circle.style.stroke = this.color;
}
}
}
Then the spinner should work like this:
<mat-spinner diameter="22" customSpinner color="#fff"></mat-spinner>
mat-spinner html code :
<mat-spinner color="accent" diameter="20" class="loading"></mat-spinner>
And now sass code :
.mat-spinner {
::ng-deep circle {
stroke: #33dd82;
}
}
Color is build in.
Theming
The color of a progress-spinner can be changed by using the color property. By default, progress-spinners use the theme's primary color. This can be changed to 'accent' or 'warn'.
https://material.angular.io/components/progress-spinner/overview
example
<mat-spinner color="warn"></mat-spinner>
I think the key here is that is must be in the GLOBAL styles.css file. The below solution does work if placed there (should be the CSS file affected when material was added to the project if added with ng add:
.mat-progress-spinner circle, .mat-spinner circle {
stroke: #b68200;
}
Of course you could also add classes to the component and specify different selectors if you want distinctly styled spinners. However, it seems the classes must be in the global CSS file.
Late to the game, but this worked well in my .scss file today...
.parent-element-class {
::ng-deep
.mat-progress-spinner,
.mat-spinner {
circle {
stroke: white;
}
}
}
In your styles.css file, add...
::ng-deep .mat-progress-spinner circle, .mat-spinner circle {
stroke: #2A79FF!important;
}
As you might have guessed, I have just made a simple modification to Nitin Wahale's answer. I have prefixed his answer with ::ng-deep and it worked in my case as I had the same issue.
I hope this helps somebody
By default angular material would give your spinner default color of primary.
You can use 3 colors available in pallet that would be primary, accent, warn.
However, if your needs are of different color please consider anyone of the below options.
Easy way(not recommended)
You can use any of method to override css forcefully mention in other answers. I would recommend using parent class above spinner element if you do not want spinner to be of same color throughout the application.
The correct and recommended approach would we to use custom-theme for material. If you already have custom you can just
do like creating a custom mixin called
//here $primary-color is the color you want your spinner to be
#mixin spinner-custom-theme($primary-color, $accent-color, $warn-color) {
$custom-spinner-theme-primary: mat-palette($primary-color);
$custom-spinner-theme-accent: mat-palette($accent-color, A200, A100, A400);
$custom-spinner-theme-warn: mat-palette($warn-color);
$custom-spinner-theme: mat-light-theme($custom-theme-primary, $custom-theme-accent, $custom-theme-warn);
#include mat-progress-spinner-theme($custom-spinner-theme);
}
Now go to file where #include angular-material-theme($custom-theme);
is written
and #include your mixin just below the #include angular-material-theme($custom-theme);
To know more on how to create custom theme you can check this blog here
Sample Color, strokeWidth, diameter and title
<mat-spinner strokeWidth="24" [diameter]="85" color="warn" title="Tooltip text here"></mat-spinner>
In your css file mention like below:
::ng-deep.mat-progress-spinner circle,.mat-spinner circle {stroke: #f2aa4cff !important;}
Here, ::ng-deep will be used to force a style.
!important here what says is that "this is Important",you ignore all other rules and apply this rule.
.mat-mdc-progress-spinner { --mdc-circular-progress-active-indicator-color: white; }
This worked for me using Angular 15.
This is best achieved by doing a custom theme.
https://material.angular.io/guide/theming
use this code
<md-progress-circular md-diameter="20px"></md-progress-circular>
md-progress-circular path {
stroke: purple;
}
In case you guys want to customize each spinner on your webpage. You can do it this way:
svg .mat-progress-spinner circle, .mat-spinner circle {
stroke: inherit;
}
And now on mat-spinner add class:
<mat-spinner class="custom-spinner-color"></mat-spinner>
And in css file:
.custom-spinner-color {
stroke: #234188;
}
That was what I wanted to achieve. I suppose if you look for this question you probably want the same.
Mat progress spinner custom timer, I changed to 3 different colors based on the value passed to mat spinner. Pls refer : https://material.angular.io/components/progress-spinner/examples
<mat-progress-spinner class="mat-spinner" [color]="progressColor"
[diameter]="170" [strokeWidth]="14"[mode]="'determinate'"
[value]="progressLabel">
</mat-progress-spinner>
Ts file
timer: number = TIMER; // say 60 seconds
progressColor: ThemePalette = 'accent';
timerPercent: number = 0;
progressLabel: number = 100;
startTimer() {
this.timer = TIMER;
this.timerInterval = setInterval(() => {
if (this.timer <= 0) {
clearInterval(this.timerInterval);
this.timerFinish();
}
if (this.timer > 0) {
this.progressColor =
this.timerPercent > 69
? 'warn'
: this.timerPercent > 49
? 'primary'
: 'accent';
this.timer--;
this.timerPercent = (100 * (TIMER - this.timer)) / TIMER;
this.progressLabel = 100 - this.timerPercent;
}
}, 1000);
}
For me this is how I do it clean without messing with anything globally:
in my .css
::ng-deep .customColorSpinner circle {stroke: #4e1e1e!important;}
in my .html
<mat-spinner class="customColorSpinner"></mat-spinner>
You can use a custom Angular Directive to solve this problem. The directive allows you to set a custom color on the mat-spinner like this:
<mat-progress-spinner spinnerColor="#09ff00"></mat-progress-spinner>
I have an article here where I explain this and thoroughly show you how to solve it
In component.scss where your mat-spinner exists, just add this :
::ng-deep .mat-mdc-progress-spinner {
--mdc-circular-progress-active-indicator-color: #7D469A;
}
I'm looking to see if anyone has ever had any experience with this CSS syntax debate we are currently having on our team. Our dev team has been using the vim plugin Tabular to align text in our code. For example in PHP or Javascript we will align variable declarations using the plugin like this:
$count = 0;
$var_1 = array();
$var_2_long_name = array();
$stdout = fopen( 'php://stdout', 'w' );
$some_data = json_decode( $some_json_data, true );
Helps the code look clean and easy to read.
We have considered using alignment in our CSS (we are using LESS but this question could be applied to SASS or just straight CSS). For example we would change this block:
.btn-section {
position: relative;
top: -65px;
display: block;
z-index: 100;
.content-box;
background-color: #grayButton;
color: #gray;
padding: 10px 0;
.border-radius(5px);
}
To this:
.btn-section {
position : relative;
top : -65px;
display : block;
z-index : 100;
background-color : #grayButton;
color : #gray;
padding : 10px 0;
.content-box;
.border-radius(5px);
}
One of the devs experimenting with this tactic moved the mixins from their original spots to the bottom of the declaration in order to make the code "look right" since mixins don't conform the the normal selector: value; format of regular css. In this case, the .content-box mixin had a background-color declaration that was being overridden by the backgroud-color line beneath it. Moving the mixin to the bottom broke the override and gave the element the wrong background color.
Errors like this coupled with the extra steps it takes to format every single block of CSS make me think this might not be such a good idea. Has anyone ever tried this type of alignment before? Any opinions on whether this is a good or bad idea? Thanks.
I think your alignment tactic is a good idea, I'd just recommend turning it upside down:
.btn-section {
.content-box;
.border-radius(5px);
position : relative;
top : -65px;
display : block;
z-index : 100;
background-color : #grayButton;
color : #gray;
padding : 10px 0;
}
That way the more general mixin styles would be applied first, after which they may be overridden by selection specific adjustments instead of the other way around.
By doing it like this, you eliminate this risk of accidently overriding specific styles with inherited ones and still keep everything neat and easy to read.
Within Ionic, I am trying to customize <ion-toggle> but I face an issue of toggle selection in css.
I have 2 <ion-toggle> and when I design them in css they are both customized : that's correct. Issue coming if I want give both different custom !
I haven't found a way to put any class="xxx" on them allowing me to customize them separately.
Beyond they are <ion-toggle> classes I'd like to design on css
// .toggle : global sensitive toggle area
// .handle : circle above the toggle area
// .toggle input : .handle moving area
// .toggle input+.track : .handle moving area when .handle at left
// .toggle input:checked+.track : .handle moving area when .handle at right
Even if I give a class to <ion-toggle> : <ion-toggle class"xxx">, there is no way to select it in css by : nor .toggle.xxx{border:......}, neither .xxx{.....}.
Please, does somebody knows how to dissociate these <ion-toggle> classes for many <ion-toggle>s ?
Solution found from the ionic documentation
By adding toggle-class="xxx" into :
<ion-toggle toggle-class="MyCustomClass" ng-repeat="item in settingsList" ng-model="item.checked" ng-checked="item.checked"> {{ item.text }} </ion-toggle>
CSS example :
.toggle-search .handle{
height: 13px!important;
width: 13px!important;
}
.toggle-search input+.track {
height: 15px;
width: 35px;
margin-top: 2px;
}
Use this code for ionic toggle
.sign_toggle .toggle .handle{
width: 45px;
height: 47px;
}
.sign_toggle .toggle .track{
width: 97px;
height: 52px;
}
.sign_toggle .toggle input:checked + .track .handle {
-webkit-transform: translate3d(20px, 0, 0);
transform: translate3d(51px, 0, 0);
background-color: #fff;
}
HTML
Add ion-toggle component to the HTML and simply add the attribute class with a class name:
<ion-toggle class="Awesome"></ion-toggle>
SCSS
Since ion-toggle is a native Ionic component in order to be able do customize it you must add the style on a global SCSS file. For example global.scss. If you add the style to a component SCSS file it won't work. So make sure it's a global SCSS file.
ion-toggle {
&.Awesome {
--background: ...;
--background-checked: ...;
--border-radius: ...;
--handle-background: ...;
--handle-background-checked: ...;
--handle-border-radius: ...;
--handle-box-shadow: ...;
--handle-height: ...;
--handle-max-height: ...;
--handle-spacing: ...;
--handle-transition: ...;
--handle-width: ...;
}
}
However not everything can be customized directly with SCSS. Check the official docs to know what can fit your needs. Documentation: Ionic - Ion Toggle - CSS Custom Properties.
Deep Customization
If you want to apply deep customization to the ion-toggle component you can use a trick called HTML & CSS injection with Javascript and/or use browser devtools in your favor to find the names of elements and classes you want to customize.
Ionic & Angular Specifications
This answer was tested on the following Ionic & Angular specifications:
Ionic CLI : 6.17.1
Ionic Framework : #ionic/angular 5.8.4
#angular-devkit/build-angular : 12.1.4
#angular-devkit/schematics : 12.1.4
#angular/cli : 12.1.4
#ionic/angular-toolkit : 4.0.0
Rather than dissociating classes the good practice would be to override those classes with custom css. Inspect DOM to see what specific classes and css properties to override.
Eclipse seems to be completely oblivious of EL expressions inside CSS. When I format my stylesheets, this happens:
.tooltip:hover span.info {
...
border-color: #{theme.get('borderTooltip')};
border-style: solid;
...
}
turns into
.tooltip:hover span.info {
...
border-color: #{theme.get('borderTooltip' )
}
;
border-style
:
solid
;
...
}
Is there anything I can do to prevent this and still use the formatter?
Go to the Eclipse preferences Window -> Preferences. And enter formatter into the search box on the upper left. I don't know which plugin performs the formatting in your case maybe you find the right one here and can change its configuration.