Set the style of the mat-select element

I'm having an issue with my select option in Angular Material. The options look fine, but when I select one, the strong tag disappears. Can anyone help me style only that part? Thank you in advance.

<mat-select formControlName="projectId" placeholder="project" [disabled]="enableList">
                <mat-option *ngFor="let projects of arrayProjects" [value]="projects.nameProject" (click)="projectSelected(projects)">
                  {{projects.nameProject}} &nbsp; - <strong> {{projects.id}} </strong> - &nbsp; {{projects.PEP | pepFormat}}
                </mat-option>
              </mat-select>

img 1 img 2

javascriptcssangulartypescriptangular-material

Answer №1

To customize the appearance of the template within a select box when an option is selected, you can utilize the mat-select-trigger directive.

<mat-select #projectSelect formControlName="projectId" placeholder="project" [disabled]="enableList">
  <mat-select-trigger>
    {{projectSelect.value.nameProject}} &nbsp; - <strong> {{projectSelect.value.id}} </strong> - &nbsp; {{projectSelect.value.PEP | pepFormat}}
  </mat-select-trigger>
  <mat-option *ngFor="let projects of arrayProjects" [value]="projects.nameProject" (click)="projectSelected(projects)">
    {{projects.nameProject}} &nbsp; - <strong> {{projects.id}} </strong> - &nbsp; {{projects.PEP | pepFormat}}
  </mat-option>
</mat-select>

It's worth noting that I have used a template reference to access the select component value. Alternatively, you could use the formControl to retrieve the value instead of the template reference. If you prefer this approach, kindly include the relevant TS code in your response.

Check out the demo here!

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

Is it possible to include three sorting states in jQuery DataTables: ASC, DESC, and NO_SORT?

When clicking on a column header in jQuery DataTables, the sorting order toggles between ascending (Down Arrow) and descending (Up Arrow). However, I am looking to customize this behavior: 1st-click ascending 2nd-click descending 3rd-click no-sorting 4th- ...

javascriptjquerydatatabledatatables

What is the best way to transfer Kendo Grid row data to a Kendo popup window within a partial view using jQuery?

I am currently facing a challenge in passing the row data from the Kendo Grid to a partial view that is displayed through a Kendo popup window. Within the partial view, users have the option to upload an image file related to the specific row record. This ...

javascriptjquerykendo-uikendo-gridkendo-window

When attempting to load a JSON file, a Node.js loader error is triggered stating "Error: Cannot find module 'example.json'" while running transpiled code through Babel

When it comes to importing or requiring JSON (.json) files in TypeScript code, there have been multiple questions addressing similar issues. However, my query specifically pertains to requiring a JSON file within an ES6 module that is transpiled to the cur ...

javascriptnode.jsjsonbabeljsnode-modules

Can the arrangement of icons/buttons on the JW Player control bar be customized?

I am trying to customize the skin of my JWplayer like this: This is my current progress: I have been researching how to rearrange the order of icon / button on the controlbar. According to the jwplayer documentation, the buttons on the controlbar are div ...

javascriptcssjwplayer

Tips for implementing pagination on a large JSON file without traditional pagination controls

Looking for the best way to implement pagination in a NextJs app that loads products from a local JSON file? This JSON file doesn't have any page properties, so the only option is to limit the number of products shown by using slice: {Object ...

reactjstypescriptnext.jspagination

Guide on how to navigate to the bottom of a div element using Selenium Webdriver

My current project involves a unique challenge where there is a specific div element on the webpage that acts as a popup dialog when a link is clicked (similar to Facebook reaction dialog boxes). To automate tests for this scenario, I am using Selenium We ...

javascriptjavaselenium-webdriverautomated-tests

I keep getting double results from the Multiple Checkbox Filter

Currently, I am facing an issue with a checkbox filter on a product page that I'm developing. The filter is functioning correctly, but I encounter duplicate results when an item matches multiple criteria. For instance, if I select both 'Size 1&ap ...

javascripthtmljquerycheckboxfilter

Prevent the Rain from descending

Looking for a way to toggle a particle emitter on or off, I've encountered memory leaks with my Reactjs code that generates rain/snow particles using the canvas element. Despite attempts to stop the animation properly, it seems to be projecting a new ...

javascriptjqueryreactjscanvas

Three divs arranged side by side with responsive design for mobile viewing

This code generates 3 divs for display. However, I am looking to optimize them for mobile devices. What steps can I take to accomplish this? Currently, the divs are oriented to the left and are not visible on a mobile device. I would like them to display ...

htmlcss

Implement a slideshow feature that automatically changes a CSS attribute when preview images are shown

(Apologies for the perplexing title) My intention was to create a slideshow gallery, and I stumbled upon an example here: https://www.w3schools.com/howto/howto_js_slideshow_gallery.asp In this setup, you'll notice previews of images in a small bar b ...

htmlcss

Error: Comparison of two objects cannot be performed in Node.js due to AssertionError

Utilizing the functions below to retrieve a value from the application and compare it with the expected value. However, encountering issues with the output displayed. Seeking assistance in resolving this matter. getEleAttribute = async function(ele, attr) ...

javascriptnode.jsprotractor

Converting Angular 2/TypeScript classes into JSON format

I am currently working on creating a class that will enable sending a JSON object to a REST API. The JSON object that needs to be sent is as follows: { "libraryName": "temp", "triggerName": "trigger", "currentVersion": "1.3", "createdUser": "xyz", ...

jsonangulartypescript

developing authentication codes using javascript

Currently, I am working on developing a sign-up system that allows users to easily generate a random string with the click of a button. The generated string can then be shared with non-users who wish to sign up. The new user will need to enter their chose ...

javascriptnode.jsfunctionexpress

Guide to dynamically configuring ViewEncapsulation for a Web Component

When initializing a component, I am facing an issue with setting up Shadow DOM based on the browser type (since IE does not support Shadow DOM). To handle this, I check if the browser is IE11 and then configure the encapsulation as Emulated for IE and Sha ...

angularweb-component

Struggling to connect CSS to HTML on Github Pages

I'm new to using Github, and I noticed that when I open the website, my HTML code is displaying without the associated CSS. Here is a snippet of my HTML code: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...

htmlcssgithub

Maximizing Server Performance with Query Data Caching

I am currently developing an Express app that involves transferring data from views to a database. However, the majority of the data needs to be linked to other data within different tables in the database. For instance, there is a "choose student name" d ...

javascriptnode.jsdatabaseexpressmemcached

Transmitting data from Angular to .NET Core for seamless integration

I have been attempting to send an xls or any other file from my angular application to a .NET core controller, but none of my methods seem to work... Below is my component where I call my service upon button click: handleFileInput(file: FileList) { this. ...

c#asp.netangulartypescriptasp.net-core

Extension for VS Code that displays the properties of a model

Is there a VS Code extension available that allows me to view the properties of a model directly from the HTML markup? For instance, when typing ngModel and then pressing the dot (.) key, it would display its properties similar to how it works in a TypeScr ...

angularvisual-studio-code

Determine if a file input is linked in React.js Material UI

Currently, I am working with a Material UI <TextField /> component that has a type=file prop to allow file attachments. My goal is to trigger an event when a file is attached to this TextField. However, my search results only provided JQuery soluti ...

javascripthtmlreactjsinputmaterial-ui

Implementing image loading within an accordion component using React and Material UI

I'm working with a React Accordion component using Material UI. Each time I open a tab in the Accordion, I want to load different images from another div that is located outside of the Accordion. Here is the current code snippet: export default funct ...

javascriptreactjsmaterial-ui