What is the best way to set the text color of cell data in a mat-table to white for the entire row when the row is selected as

Is there a way to change the text color when a row is selected in my application? I have already figured out how to change the background color of the row, but how can I target the text within the cells?

I'm considering using a similar approach to the highlight method I used before, but I'm not sure what to specify to select the text inside the row cells.

This is my HTML:

<mat-row *matRowDef="let row; columns: displayedColumns" [ngClass]="{'highlight': selectedRowIndex == row.containerNo}"
                (click)="highlight(row)"
                (click)="openCentred(content)">

</mat-row>

In my TypeScript file:

selectedRowIndex: number = -1;

    highlight(row) {
        this.selectedRowIndex = row.containerNo;
    }

And here is my CSS:

.highlight  {
    background:#286090; /* darkblue */

  }

Any suggestions on how to change the text color of the selected row?

Thanks for your help!

Best regards,

Rasmus

cssangular

Answer №1

It is recommended to utilize row.id in place of row.containerNo.

To modify the text color, you must direct your styling towards the actual cell. Check out an example at this working StackBlitz.

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 add an entire object to formData in one

I am looking to send both an image list and product data to an ASP.net api using formData. I have successfully sent the images, but now I am struggling with appending the entire object. I have come across some methods in JS like JSON.stringfy(object) or Ob ...

asp.netangulartypescript

The final li element in the second unordered list is targeted by the selector ul li:last-child

Check out this JsFiddle Having trouble with the pseudo code :last-child. I want the style to apply to the li containing E, but it's affecting the last li in the .subNav. I've attempted a few solutions below, but none have worked. nav ul:first- ...

csscss-selectors

How can I switch between different images using jQuery?

HTML <div class="image_rollover"> <img id="image_one" src=image_one.png"> <img id="image_two" src="image_two.png"> <img id="image_three" src="image_three.png"> <img id="image_four" src="image_four.png"> ...

javascriptjquerycss

Encountering an error in an Angular 4 application when running in Internet Explorer 11: "Unable to execute code from a script that has been freed

I am encountering an issue with my Angular app, which I believe is running version 4. The problem arises in Internet Explorer 11 during a login sequence and the error message states "Can't execute code from a freed script". The IE console points to li ...

angularinternet-explorer

Stop the click event using a confirmation dialog before proceeding with the operation

I'm trying to implement a confirmation dialog before deletion by using e.preventDefault() to prevent immediate deletion. However, I am facing an issue in the YES function where I would like to resume the click event's operation with return true w ...

javascriptjqueryhtmlcssalertify

Positioning a div at the bottom of a webpage without using absolute positioning in HTML

Check out the fiddle. I've included some CSS to position the tab on the right side. My goal was to have those tabs in the lower right corner of the container. If I use absolute positioning for the div, it messes up the tab content width. I tried ad ...

javascriptjqueryhtmlcss

The alignment issue arises when the browser is resized

Something seems off with my images. They appear correctly when I first open the browser, but if I resize it, they go all wonky. Refreshing the page fixes it, but if I open a larger browser window and then make it smaller, it messes up again. It's puzz ...

htmlcssimageresponsive-designresize

CORS regulations are preventing access

I have set up an Express server to run my Angular app for server-side rendering purposes. Initially, everything works fine when I make a request from the application. However, an issue arises when I navigate to another page and then return to the previous ...

angularexpresscors

Adjusting the height of a DIV element to suit the window dimensions

I am facing an issue with the following HTML code: <div id="subpageHeaderImageSection"> <div id="subpageHeaderLeft"> <span id="holdImageP"></span> <!--[if lte IE 10]><img id="igm" src="theImages/sub ...

javascriptjqueryhtmlcss

ng2-select2 prevent selection of initial value

My Angular project has the following setup: Hello.component.html <select2 ngDefaultControl [data]="list" [options]="{ placeholder: placeholder }" > </select2> Hello.component.ts list = [ { id: 1, text: 'Item 1 one' }, { i ...

angularjquery-select2

How does the size of a font affect the amount of screen space a character occupies in pixels?

I am currently working on a custom user interface that requires precise measurement of how many pixels are taken up by a specific string of text. My attempts to control the character size using the font-size property have been met with unexpected results. ...

htmlcssfonts

Connect your Angular project on your local system

Having some trouble connecting my angular 13 project as a ui-component library. Successfully built the project and have the package stored in a dist folder. I then linked it to my primary project (angular 14) using "yarn link" and confirmed its presence as ...

angularnpmyarnpkgsymlinkyarn-link

How can I enhance the appearance of my custom field using CSS in Advanced Custom Fields?

Utilizing the Wordpress Advanced custom field plugin, I have successfully added a custom field to my site. Within this custom field, I have inserted images and now I am looking to center them on my page using CSS styles such as margin: 0 auto. If you&apo ...

csswordpressadvanced-custom-fields

Issue with Async pipe when utilizing autocomplete functionality

HTML Code <mat-form-field> <input type="text" matInput class="formControl" [formControl]="name" [matAutocomplete]="auto" > <mat-autocomplete #auto="matAutocomplete"> <mat-option *ngFor="let option of city | async" [valu ...

htmlangular

What is the best way to position a box in the center using CSS?

I have constructed a container using div and included 4 additional div elements inside: HTML: <div className='main__container'> <div className='item'>Image</div> <div className='item'>N ...

htmlcssreactjs

What is the method for tallying CSS page breaks in printed HTML documents?

Currently, for my report generation process using HTML and CSS to manage page breaks dynamically. I've enabled the option for users to print multiple reports at once by combining them into different sections within a single HTML document. This helps p ...

javascripthtmlcssprinting

Establishing a default value for a select using reactive forms

I need assistance with a function that looks like this: cancel(): void { this.form.reset(); this.router.navigate([], { queryParams: { activeOnly: false } }); } Here is how it appears in the HTML: <select class="form-control-sm" id="select-process ...

angularangular-reactive-forms

The Angular 4 HTTP patch method is encountering difficulties when called in code but functions properly when tested using Post

My attempts to make a patch and post call to the server are failing as it never reaches the server. Interestingly, the same request works flawlessly in Postman, so I suspect there might be an issue with my code. Both my post and patch methods are essentia ...

angularhttptypescript

Ways to conceal a dynamically generated div upon page load?

I am currently facing a scenario where I need to dynamically create a div. My initial approach was to create it on the document ready event, but the requirement is for it to be displayed only upon selection. The problem I am encountering is that the empty ...

javascriptjqueryhtmlcss

What is the method to cancel an Observable subscription without having a reference to the object of type "Subscription"?

If I were to subscribe to an Observable without an object of type "Subscription," how can I properly unsubscribe from it? For instance, if my code looks something like this: this.subscription = bla ... I know I can easily unsubscribe using the following ...

angulartypescriptobservablesubscription