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

Utilizing CSS flexbox to occupy the remaining vertical space

I'm facing a scenario where I have three elements: div with content 1, div with content 2, and an image that spans 100% width (with variable height). My goal is to align div 1 at the top, the image at the bottom, and fill the remaining space with cont ...

htmlcssflexbox

When working on my asp.net webform, I incorporated an AgreementCheckBox along with a CustomValidator. However, I encountered an issue where the error message

Code for AgreementCheckBox: <asp:CheckBox ID="AgreementCheckBox" runat="server" ForeColor="Black" Text="Please agree to our terms and conditions!" /> Code for AgreementCustomValidator: <asp:CustomValidator ID="AgreementCustomValidator" runat=" ...

javascriptc#asp.net

Issues arise with the Dropend Menu in Bootstrap when attempting to utilize a dropdown menu

As I work on developing a sidebar using Bootstrap 5, I encountered an issue with the positioning of a "Dropdown" and "Dropend" menu when they are open. Specifically, while the Dropdown menu functions correctly, the Dropend menu does not align properly. In ...

htmlcssbootstrap-5

Recurrence of the Chosen Headers

After discovering the new website http://csslint.net, I've started to question my approach to constructing stylesheets. One method I have recently used is as follows: /* Fonts */ h1 { font-size:20px } p { font-size:12px } /* Colors */ h1 { colo ...

cssperformancecss-selectorscsslint

How can I retrieve and store session information during the authorization event in Socket.io with express-sessions?

I have set up a websocket using Socket.io and the express 4 framework on a node.js server. Currently, I am working on implementing an authorization step for my users when they are using the websocket. Upon a user connection, a token is passed as a query ...

javascriptnode.jsexpresswebsocketsocket.io

Sorting through JSON information based on specific attributes and criteria

Consider this JSON object: { 'name' : 'John', 'friends' : [ { 'id' : 1, 'name' : 'George', 'level' : 10 }, { 'id' : 2, 'name ...

javascriptjsonangularjs

Mixing up jQuery's Deferred, jsDeferred, and the concept of deferring in coding can be a common source of confusion

I recently downloaded a library called jsdeferred in hopes of resolving some code-flow issues I've been facing. However, I'm finding the examples and documentation to be a bit unclear. In my quest for clarity, I also discovered that jQuery offers ...

javascriptjqueryjquery-deferred

Installation of Angular-cli was unsuccessful

Can you assist me with a query? I attempted to install the angular-cli using the npm command npm install -g angular-cli, but I encountered numerous error messages and the 'ng' command isn't working. Some of the errors I received include: ...

angularjsnode.jsangularangular-cli

Component fails to update when state updated using useState()

In my current project, I am facing an issue with a parent (App) and child (MUIDatatable) component setup. The child component is a datatable that requires a columns prop to define the structure of the columns, including a custom render function for one of ...

javascriptreactjsecmascript-6mui-datatable

What is the process for inserting a key value pair into a JSON object?

I am looking to enhance my JSON data by including a key-value pair in each object within the array. https://i.sstatic.net/48ptf.png My goal is to insert a key-value pair into every object in the students array. ...

javascriptjson

Utilize Material UI AutoComplete in React to showcase a variety of choices in a list and capture various selections in the form state, including multiple values

I'm looking to implement Autocomplete in a way that it saves a specific property of an object in the form state and displays a different property in the autocomplete options list. For instance, if we have the following option list: [ { gender_name ...

javascriptreactjsmaterial-uiformikformik-material-ui

What is the best way to manage a JSON feed that does not provide any results?

Excuse my lack of experience as I pose my first question. Using FullCalendar 5.10.1, I am working on retrieving events dynamically associated with Festivals. I have followed the 'events (as a json feed)' pattern from the documentation. When ther ...

javascriptjsonajaxfullcalendarfullcalendar-5

What steps are involved in developing an Angular library wrapper for a pre-existing Javascript library?

Imagine having a vanilla Javascript library that is commonly used on websites without any frameworks. How can you create an Angular library that can be easily installed via npm to seamlessly integrate the library into an Angular application? The process o ...

javascriptangularnpmangular-moduleangular-library

Numerous occurrences of Setinterval

I am currently facing a minor issue with my code. My setup involves an auto-playing rotating fadeIn fadeOut slider, where clicking on a li will navigate to that 'slide' and pause the slider for a specific duration. The problem arises when a use ...

javascriptjquerysetinterval

The concept of CSS background-position

Hey there, I have a query regarding a sprite image that contains icons with both normal and hover effects. Here is the current CSS code I am using: .wi{ background-image:url(images/icons/small/wi.png); background-repeat:no-repeat; display:blo ...

csscss-spritesbackground-position

The header row in HTML tables sometimes vanishes unexpectedly after sorting the table

Upon filtering the table, I noticed that the header disappears sporadically. The issue is that the table header row should remain in place regardless of whether or not the characters used for filtering are present in the table rows. In Example 1: When fil ...

javascripthtmlpython-3.xchar

What is the best way to ensure that the child flex box matches the height of the parent flex box by 100%?

As a beginner, I'm venturing into creating an experimental site for myself. However, I am facing an issue where the .menu-container does not seem to stretch 100% the height of the .container. You can view the code on jsfiddle: https://jsfiddle.net/y1 ...

htmlcss

Something seems off with my code. It's causing a barrage of errors to appear on the browser

JavaScript is a whole new world for me, and I'm struggling with all these errors. The goal here is simple: click the "generate" button, and under "Most Recent Entry," display the current temperature for the entered zip code, today's date, and th ...

javascriptexpresscorsfetch-apibody-parser

Tips for ensuring a scrollbar remains at the bottom position

I'm facing an issue with a scroll-bar inside a div element. Initially, the position of the scroll-bar is at the top. However, whenever I add text to the div element, the scroll-bar remains in its initial position and does not automatically move to the ...

javascriptjqueryhtmlcss

Personalize the menu item in material ui

Currently, I have a <select> component from Material UI and I am iterating over the menuItem elements. Here is a sample you can reference: here My issue lies in trying to change the background color of each menu item. Although I attempted to do so, ...

javascripthtmlcssreactjsmaterial-ui