Angular 7 - Change color of Mat-select-value based on condition
you can use the normal class property with the condition
<mat-select class="{{myCondition ? 'one' : 'two'}}" > ... </mat-select>
and give the style to the corresponding class
::ng-deep {
.two .mat-select-value-text {
color : red;
}
}
https://stackblitz.com/edit/angular-mat-select-example-6rylbe?file=src%2Fapp%2Fapp.component.html
Angular-Material, How to change color of selected mat-option
In your CSS-
::ng-deep .mat-select-value
{
color: green!important;
}
Is this what you are looking for?
Styling mat-select in Angular Material
For Angular9+, according to this, you can use:
.mat-select-panel {
background: red;
....
}
Demo
Angular Material uses
mat-select-content
as class name for the select list content. For its styling I would suggest four options.1. Use ::ng-deep:
Use the /deep/ shadow-piercing descendant combinator to force a style
down through the child component tree into all the child component
views. The /deep/ combinator works to any depth of nested components,
and it applies to both the view children and content children of the
component.
Use /deep/, >>> and ::ng-deep only with emulated view encapsulation.
Emulated is the default and most commonly used view encapsulation. For
more information, see the Controlling view encapsulation section. The
shadow-piercing descendant combinator is deprecated and support is
being removed from major browsers and tools. As such we plan to drop
support in Angular (for all 3 of /deep/, >>> and ::ng-deep). Until
then ::ng-deep should be preferred for a broader compatibility with
the tools.
CSS:
::ng-deep .mat-select-content{
width:2000px;
background-color: red;
font-size: 10px;
}
DEMO
2. Use ViewEncapsulation
... component CSS styles are encapsulated into the component's view and
don't affect the rest of the application.
To control how this encapsulation happens on a per component basis,
you can set the view encapsulation mode in the component metadata.
Choose from the following modes:
....
None means that Angular does no view encapsulation. Angular adds the
CSS to the global styles. The scoping rules, isolations, and
protections discussed earlier don't apply. This is essentially the
same as pasting the component's styles into the HTML.
None value is what you will need to break the encapsulation and set material style from your component.
So can set on the component's selector:
Typscript:
import {ViewEncapsulation } from '@angular/core';
....
@Component({
....
encapsulation: ViewEncapsulation.None
})
CSS
.mat-select-content{
width:2000px;
background-color: red;
font-size: 10px;
}
DEMO
3. Set class style in style.css
This time you have to 'force' styles with !important
too.
style.css
.mat-select-content{
width:2000px !important;
background-color: red !important;
font-size: 10px !important;
}
DEMO
4. Use inline style
<mat-option style="width:2000px; background-color: red; font-size: 10px;" ...>
DEMO
Angular Material Select: change color of disabled option
If you inspect the generated CSS for the mat-select
element, you'll find that the .mat-disabled
class doesn't style <mat-select>
directly. Instead, its descendants change styling based on the presence of that class; namely, the trigger value (the element with the most visual styling applied to it) has a specificity rule of
.mat-select-disabled .mat-select-value {
color: rgba(black, 0.38);
}
(side note -- I see you're using opacity: 1
in your example rule. That won't make text with a color: rgba(x)
look any different.)
Just by nature of CSS you'll need to get more specific than this rule to override it.
Because Angular is awesome, it operates on a concept called view encapsulation -- a component's styles are local to that component. This is achieved with an attribute tag, where all components styles will have that added to selectors as a rule.
This means that if you just copy that same rule in your component, it will be more specific than the previous selectors and will apply.
If you're trying to apply this globally, you'll need to add another class selector and add that class to the element. Or, those using SASS and Material theming could wrap this up in a theme and apply it with a simple class. A directive would work too.
Also, please please never use !important
. A puppy dies every time you do.
Related Topics
Macos Chrome Horizontal Scrollbar Not Disappearing
Assigining Different Font-Size Per Each Font in One Font-Family
Css: Circle with Four Colors and Only One Div
Disappearing Position Fixed Header in iOS7 Mobile Safari
How to Change the Style of a Ant-Design 'Select' Component
Css: What This Asterisk (*) Does
Font-Face Not Working in Ie, Otf Font
How to Set Responsive Image's Max Width (Bootstrap 4)
Responsive Images Inline-Block in a Div with Bootstrap
How to Update and Include Twitter Bootstrap 3 on Webapp or Yo Angular
Max-Width of Img Inside Flexbox Doesn't Preserve Aspect Ratio
How to Add Stylesheets to Jsdom
Does @Font-Face Work in Email Templates
Media Queries for Landscape Printing
Why Not Use Margin Positioning Instead of Using Position:Relative Top 5Px