As the headline says, I updated the version of IntelliJ and now the angular material selector ::ng-deep is showing me as deprecated.
Example:
<mat-form-field class="register-custom-select">
<mat-select formControlName="gender" required>
<mat-option class="register-custom-option" *ngFor="let gender of genders
[value]="gender.genderValue">
{{ gender.genderValue }}
</mat-option>
</mat-select>
</mat-form-field>
::ng-deep .register-custom-select .mat-form-field-underline {
background-color: #838383;
}
What do I need to change to make the selector no longer deprecated and still have the style?
For me using globale style resolve this
In your style.css yu can add
.register-custom-select .mat-form-field-underline {
background-color: #838383!important;
}
Related
Using ::ng-deep it solve the problem, but it affect all mat-select in the same module, so how can I change mat-select style juste in a specific component?
::ng-deep .mat-select-panel{
max-height: none!important;
}
Edit:
<div class="col-md-2 kt-margin-bottom-10-mobile">
<div class="kt-form__control">
<mat-form-field >
<mat-select [(value)]="searchOption"
class="mat-form-field mat-form-field-fluid"
placeholder="Search by...">
<mat-option value="all"><span>All</span></mat-option>
<mat-option value="ref"><span>Reference</span></mat-option>
<mat-option value="name"><span>Name</span></mat-option>
<mat-option value="team"><span>Team</span></mat-option>
</mat-select>
</mat-form-field>
</div>
</div>
You can do this then,
// Add an ID to the div in the HTML
<div class="col-md-2 kt-margin-bottom-10-mobile">
<div class="kt-form__control">
<mat-form-field id="search-option-id"> <-- Add the ID Here
<mat-select
[(value)]="searchOption"
class="mat-form-field mat-form-field-fluid"
placeholder="Search by..."
>
<mat-option value="all"><span>All</span></mat-option>
<mat-option value="ref"><span>Reference</span></mat-option>
<mat-option value="name"><span>Name</span></mat-option>
<mat-option value="team"><span>Team</span></mat-option>
</mat-select>
</mat-form-field>
</div>
</div>
// In your CSS file, you can do this:
#search-option-id > mat-select { <-- You can do this in the CSS
::ng-deep .mat-select-panel {
max-height: none!important;
}
}
Actually, the mat-select-panel is outside your component, in the .cdk-overlay-container. So you can't change CSS only for your own component's mat-selects.
What you CAN do, is adding a class to the select-panel, and then make a true ng-deep rule
<mat-form-field>
<mat-select [(value)]="searchOption"
class="mat-form-field mat-form-field-fluid"
panelClass="auto-height" <-- adding class to panel here
placeholder="Search by...">
<mat-option value="all"><span>All</span></mat-option>
<mat-option value="ref"><span>Reference</span></mat-option>
<mat-option value="name"><span>Name</span></mat-option>
<mat-option value="team"><span>Team</span></mat-option>
</mat-select>
</mat-form-field>
and in your scss file:
::ng-deep .mat-select-panel.auto-height {
max-height: none;
}
Or even better, add it to your material-overload.scss file if you already have one. If not, add it to your styles.scss file, so you don't use ng-deep at all:
.cdk-overlay-container {
.mat-select-panel.auto-height {
max-height: none;
}
}
Im having an issue when I try to change the CSS of dropdown using mat-form-field of angular material in two things :
My CSS doesnt change the propertys <option> and <optgroup> .
cant change :hover CSS for <option>
the position ot the dropdown "cuts" the current selected option.
My dropdown style atm (default angular-material) :
drop-down-atm
The html :
<mat-form-field class="drop-down" appearance="fill">
<select matNativeControl [(ngModel)]="currentActiveModeValue" (change)="onModeChange($event)">
<optgroup *ngFor="let mainModes of activeModArry; let i = index" label="{{ mainModes.name }}">
<option *ngFor="let subModes of mainModes.childModes" [value]="subModes.id">
{{ subModes.name }}
</option>
</optgroup>
</select>
</mat-form-field>
The style I wish to do :
the drop-down I need
Really need some help with that, If someone had this problem before :)
I believe native dropdowns are not style-able. You can try to use the material select and add your own classes to be able to style it
<mat-form-field appearance="fill" class="my-class">
<mat-select [(ngModel)]="currentActiveModeValue" (change)="onModeChange($event)">
<mat-optgroup *ngFor="let mainModes of activeModArry; let i = index" [label]="mainModes.name">
<mat-option *ngFor="let subModes of mainModes.childModes" [value]="subModes.id">
{{ subModes.name }}
</mat-option>
</mat-optgroup>
</mat-select>
</mat-form-field>
https://material.angular.io/components/select/overview
Edit: You may need to use the ::ng-deep selector to target the shadow elements that material generates.
Something like:
.mat-form-field ::ng-deep .mat-optgroup {
// styles
}
when you work with some material angular components you need declare the styles "globlally". You can include in your file "styles.sccs"
.mat-optgroup-label {
color:black;
font-weight:600;
border-bottom:1px solid silver;
}
.mat-optgroup .mat-option:not(.mat-option-multiple) {
padding-left: 0!important;
}
.mat-option-text {
border-bottom:1px solid silver;
padding-left:32px;
}
The reason is that some Angular components create the "popup" outsite our component. You can see it in a div called cdk-overlay-container. This components has a property panelClass that allow us only change the css of only this component. That's. In your styles.scss you replace the before .css by -I used "special", you use the word you want
.special .mat-optgroup-label {
color:black;
font-weight:600;
border-bottom:1px solid silver;
}
.special .mat-optgroup .mat-option:not(.mat-option-multiple) {
padding-left: 0!important;
}
.special .mat-option-text {
border-bottom:1px solid silver;
padding-left:32px;
}
And in your select
<mat-select panelClass="special" ...>
...
</mat-select>
In your code example, for the hover to work you must use the material elements and then in the css use the ::ng-deep, also verify that it does not have encapsulation set, in the component's .ts in the #Component.
In the html it would look like this:
<mat-form-field class="drop-down" appearance="fill">
<mat-select matNativeControl [(ngModel)]="currentActiveModeValue" (change)="onModeChange($event)">
<mat-optgroup *ngFor="let mainModes of activeModArry; let i = index" label="{{ mainModes.name }}">
<mat-option *ngFor="let subModes of mainModes.childModes" [value]="subModes.id">
{{ subModes.name }}
</mat-option>
</mat-optgroup>
</mat-select>
</mat-form-field>
and the css would be like this
::ng-deep mat-option:hover {
...
}
Using Angular 7+ and Angular Material I'm looking to change the color of the Placeholder text on input fields.
Reviewing similar questions I've tried using ::ng-deep and mat-placeholder. I got it to work using mat-placeholder, however this will be removed in future versions of Angular Material.
<form class="example-form">
<mat-form-field class="example-full-width">
<input matInput placeholder="Favorite food" value="Sushi">
</mat-form-field>
</form>
Change the color of the matInput placeholder text.
<mat-form-field>
<input matInput type="text">
<mat-placeholder class="placeholder">Email</mat-placeholder>
</mat-form-field>
.mat-form-field-underline {
/*change color of underline*/
background-color: #dce2f4 !important;
}
.mat-form-field-ripple {
/*change color of underline when focused*/
background-color: #2e2f36 !important;
}
.placeholder {
color: #dce2f4 ;
}
I am using mat-select in my Angular application. I would like to change the text color, but the color doesn't change.
<mat-select style="color: red" [(ngModel)]="someValue">
<mat-option>class="empty-select"</mat-option>
<mat-option class="not-empty-select" *ngFor="let unit of units [value]="unit">{{unit}}</mat-option>
</mat-select>
I can change the background color without problems, but the text color doesn't change.
You need to apply style on mat-option rather than mat-select as:
<mat-select [(ngModel)]="someValue">
<mat-option class="empty-select"></mat-option>
<mat-option style="color: red" class="not-empty-select" *ngFor="let unit of units [value]="unit">{{unit}}</mat-option>
</mat-select>
Also you can set color in class not-empty-select.
Update 1:
If you want to change color of selected option add following CSS:
.not-empty-select.mat-selected {
color: green !important;
}
Update 2:
If you want to change color in select box modify CSS as:
.not-empty-select.mat-selected {
color: green !important;
}
:host /deep/ .mat-select-value-text {
color: green !important;
}
If you check closely mat-select-value is the class which holds the css for placeholer font in mat-select tag;
so Using
::ng-deep .mat-select-value{
color: white!important; }
will apply the color you give. !important is to override the default value.
You can overwrite the css for following elements as -
Select box panel
/deep/ .mat-select-panel {
background-color: red;
}
Select box options element
/deep/ .mat-form-field-infix{
background-color: red;
}
Select box
/deep/ .mat-select{
background-color: red;
}
do not forget to add /deep/ as mentioned.
Select Box text color
Use this one if you want to change the text color of select.
/deep/ .mat-form-field-type-mat-select .mat-form-field-label, .mat-select-value {
color: red;
}
Demo copy is here - https://stackblitz.com/edit/angular-material-pagination-123456-5teixy
Add this to your styles.css file
.mat-select-red .mat-select-value{
color: red !important;
}
In your component.html file
<mat-select class="mat-select-red" [(ngModel)]="someValue">
<mat-option>class="empty-select"</mat-option>
<mat-option class="not-empty-select" *ngFor="let unit of units [value]="unit">{{unit}}</mat-option>
</mat-select>
::ng-deep .mat-select-arrow {
display: none !important;
}
its works for me
<mat-select [(ngModel)]="someValue">
<mat-option style="color: red" >class="empty-select"</mat-option>
<mat-option style="color: red" class="not-empty-select"
*ngFor="let unit of units [value]="unit">{{unit}}</mat-option>
</mat-select>
option appearance (legacy, standard, fill, outline)
<mat-form-field appearance="legacy">
<mat-label>Choose an option</mat-label>
<mat-select>
<mat-option value="option1">Option 1</mat-option>...
</mat-select>
</mat-form-field>
Lets say you have this select:
<mat-form-field appearance="fill">
<mat-label>The label</mat-label>
<mat-select>
<mat-option value="This">This</mat-option>
<mat-option value="That">That</mat-option>
</mat-select>
</mat-form-field>
This is displayed like this:
To style the colors only, try this:
::ng-deep .mat-form-field.mat-focused .mat-form-field-ripple {
background-color: red;
}
::ng-deep .mat-form-field.mat-focused .mat-form-field-label {
color: red;
}
::ng-deep .mat-form-field.mat-focused.mat-primary .mat-select-arrow{
color: red;
}
::ng-deep .mat-primary .mat-option.mat-selected:not(.mat-option-disabled){
color: red;
}
Which produces
This works on Angular 11.2.0, Angular Material 11.2.0.
This helped me change the style of the selected text:
::ng-deep .mat-selected .mat-option-text { color: white!important; }
I have the following HTML to display select locations and below that map will be displayed.
I have the following HTML for the above view,
<mat-form-field class="locationSelector">
<mat-select placeholder="Choose location" (ngModel)="ServiceLocations">
<mat-option *ngFor="let location of ServiceLocations" [value]="location" style="width:200px; background-color: red; font-size: 10px;">
{{ location.areaName }}
</mat-option>
</mat-select>
</mat-form-field>
<div>
<agm-map [latitude]="latitude" [longitude]="longitude" [zoom]="zoom">
</agm-map>
</div>
And corresponding CSS is ,
agm-map {
height: 300px;
position: relative;
}
.locationSelector {
width: 20%;
}
The view I am getting is,
And when I click on select options, I am getting a view as follows,
Please correct me where I am wrong.
All required material components are imported in app.module.ts
Import a theme in your global style.css file.