Angular 7 - Customize Mat-select-value color depending on a specific condition

One issue I am facing is changing the color of a selected value in a mat select based on a condition. This change should be visually apparent to the user. Although accessing mat-select-value from the styles is possible, implementing a condition using ng-class is proving to be challenging:

<mat-form-field>
      <mat-select name="list"  
      [style.color]="myCondtition ? 'none': 'green'"
      (selectionChange)="change()">
        <mat-option *ngFor="let option of options" [value]="currentOption">
          {{option.viewvalue}}
         </mat-option>
      </mat-select>

While properties like [style.font-weight], [style.background-color], and [style.font-size] can easily be manipulated, I have noticed that there is no direct way to adjust font-color. Furthermore, it seems that [style.color] only works with inputs.

cssangularangular-material

Answer №1

Utilize the regular class attribute based on a condition

<mat-select class="{{myCondition ? 'one' : 'two'}}" > ... </mat-select>

Then apply styles to each class accordingly

::ng-deep {
    .two .mat-select-value-text {
      color : red;
     }
     .one .mat-select-value-text {
      color : green;
     }
   }

Check out this example on StackBlitz for more details!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Adding a scrollable feature to a Bootstrap Modal seems to be generating additional unnecessary pages at the

I need help with my scrollable bootstrap modal that has a print button on top. When the user clicks the button, I want to print the modal content. Here is the code snippet: HTML : <div class="container-fluid" id="body-noPrint"> /* HTML BODY CON ...

javascriptjqueryhtmlcsstwitter-bootstrap

Changing color of navigation bar link upon refreshing the page using Bootstrap

I am new to the world of HTML/CSS/Bootstrap and recently made a change to the color of a link on the navbar. However, I am encountering an issue where the original blue color of the link briefly appears when I refresh the page. I would like to prevent this ...

htmlcssbootstrap-4navbar

Storing Data Locally in Angular with User Authentication

Using angular8, I encountered an issue where logging in with USER1 credentials, closing the browser, and then attempting to log in with USER2 credentials still logged me in as USER1. While adding code to the app component resolved this problem, I faced an ...

angulartypescriptangular-ui-routerangular8

Purging the localStorage upon the initialization of an Angular application

I have a project in Angular where I need to clear the localStorage when the user first opens the application, ensuring that it is cleared automatically if the browser or tab is closed. In addition, I want to redirect the user to the login component upon ...

angular

information not visible on the webpage

Recently, I made an alarming discovery on my website. I have implemented two different types of menus - one for the front page (designated as .navbar-inverse) and another for all other pages (.navbar-default). The front page menu is static while the other ...

jqueryhtmlcsswordpresstwitter-bootstrap

You are unable to assign to 'total' as it is a constant or a property that cannot be modified

Upon running ng build --prod in my project, I encountered the following error: src\app\components\xxxx\xxxx.component.html(116,100): : Cannot assign to 'total' because it is a constant or a read-only property. The proble ...

angulartypescriptangular5readonly

Utilizing Angular 2 for transforming JSON data into Angular classes

I have been working through the Angular2 getting started guide to kickstart my own application development. So far, I have managed to retrieve JSON objects from a local file and display them in angular2 templates. However, the challenge arises when the str ...

jsontypescriptangularjsonp

The table headers in the second table do not match the queryAllSelector

I've encountered an issue with my JavaScript snippet that displays a responsive table. When I use the snippet for a second table with the same class, the formatting gets messed up on mobile devices (try resizing your screen to see). It seems like the ...

javascriptcss

Update the Ngrx reducer when the component is present on the page

One dilemma I am facing involves managing two components within a page - an update user form and a history of events. Each component has its own reducer (user and events). My goal is to update the list of events in the store through an API call once the us ...

javascriptangularngrxngrx-effects

The sticky navbar fails to stay in place when the content becomes too lengthy

This is my current state of code (minified, for explanation only) index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-w ...

htmlcssreactjstypescriptnext.js

What are the steps to resolve routing issues within an Angular component integrated into an ASP.NET Core web application?

When it comes to routing in Angular, I have been following the Angular tutorial from documentation. My example application integrates Angular components with an ASP.NET Core 2.2 web app, and these components are displayed within .cshtml views. I use Angul ...

angulartypescriptroutesasp.net-core-2.2

Using CSS to set the display property to table-cell and converting it to a

I needed a SideMenu that would match the length of the content, but for some reason, using display:table-cell caused it to display:block in both Firefox and Chrome. What could be the reason behind this inconsistency? .back-branded { background: #900; ...

htmlcss

Tips for converting file byte code to file form data

From one folder I am retrieving a file and uploading it to another server. However, when I extract the file from the first folder, I receive a byte code representation of that file. The API for uploading the file to the second folder requires FormData as a ...

javascriptangularangular7

How to position menu on the right side using bootstrap

Hello everyone, as a newbie I have been struggling to align my navigation menu to the right while keeping the logo on the left side. I have tried multiple approaches without success. Currently, I am working with Bootstrap 4.7 and using the navbar code in ...

htmlcssbootstrap-4

HTML underlay with interactive z-index functionality

Is it possible to create an interactive Google Map with a frame image displayed? <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <input type="button" onclick="$('#frame_image').show();" val ...

htmlcssz-index

Tips for accessing Firebase document fields with Angular Firestore (version 7)

My current task involves retrieving a Firebase document property based on the specified model: After successfully locating a document with this code snippet: //Users - collection name, uid - document uid. I am attempting to access the isAdmin property u ...

angulartypescriptfirebasegoogle-cloud-firestore

Sketch the borders of the element (animated)

Seeking a way to create a button with an animated border that looks like it is being drawn. Current progress involves some code, but it's not working smoothly with border-radius set. (keep an eye on the corners) https://codepen.io/anon/pen/MbWagQ & ...

javascriptjqueryhtmlcss

By employing the pseudo selector ::after, one can enhance the design

Trying to align 2 images next to each other, I am floating one left and the other right with the intention of clearing the float using the ::after pseudo selector. The surrounding text is expected to flow in between the images. I often struggle with maki ...

htmlcss

Utilization of CSS with the symbols of greater than and asterisk

I've been experimenting with Sequence.js and finding it really impressive. There's one line of code that I'm having trouble understanding: #sequence .seq-canvas > * {...} I discovered that the > symbol selects only direct descendant ...

csscss-selectors

Toggle Submenu Visibility with a Click

One section of my code is located in sidebar.component.html : <ul class="nav"> <li routerLinkActive="active" *ngFor="let menuItem of menuItems" class="{{menuItem.class}} nav-item"> &l ...

htmlcssangulartypescript