Change the color of a cell in a mat-table

My mat-table has a basic column structure like this:

<mat-table #table [dataSource]="dataSource" matSort>

    <ng-container matColumnDef="zone">
        <mat-header-cell *matHeaderCellDef mat-sort-header></mat-header-cell>
        <mat-cell *matCellDef="let item" [style.background-color]="'#' + item.zone.color"></mat-cell>
    </ng-container>

    ...

</mat-table>

I'm looking to assign different colors to the cells in the 'zone' column, row by row.

Although I've managed to color entire rows, I want to target only the cells in the 'zone' column.

The HTML output for the zone column cells looks like this:

<mat-cell class="mat-cell cdk-column-zone mat-column-zone" role="gridcell" style="background-color: rgb(255, 182, 193);" _ngcontent-c8=""></mat-cell>

While the background-color style is applied correctly, the issue lies in the cell's height being 0 since there is no content. Even inserting an &nbsp; results in a thin bar with margins:

https://i.sstatic.net/faVto.jpg

My goal is to color the entire cell along with its margins. How can individual cells be colored in a mat-table?

htmlcssangularangular-material

Answer №1

Upon examining the default CSS provided by Angular Material, it becomes evident that the mat-row element is set with a minimum height of 48px.

https://i.sstatic.net/ydu9q.png

Contrastingly, when looking at the mat-cell element, there is no specified minimum or default height established. Instead, it depends on the parent element's (the row) display and alignment properties to maintain centering.

https://i.sstatic.net/MTspw.png

The preceding image clearly highlights the specific area affected by the background color property in your code.

To alter the background color for the entire cell, one possible approach would be setting the cells' minimum height equal to that of the rows, achievable through the following CSS declaration:

.mat-cell, .mat-header-cell {
    flex: 1;
    min-height: 48px;
    display: flex;
    align-items: center;
}

Subsequently, utilize the background color property to effect the desired color change.

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

The category of template reference variable in Angular 2

Can anyone point me in the right direction to find information on the data type of reference variables? <input #my-int .../> <form #my-form /> In the example above, my-int is associated with an input, and my-form is linked to ngForm. I am cur ...

angular

Implementing jQuery in ASP.NET code-behind files

I am new to asp.net and trying to learn by experimenting with rendering aspx in only specific parts. I was able to make it work, but encountered an issue when trying to create a button, textbox, and label where the label would display the text from the tex ...

jqueryhtmlasp.net

Executing the Angular 2 foreach loop before the array is modified by another function

Currently, I am facing some difficulties with an array that requires alteration and re-use within a foreach loop. Below is a snippet of the code: this.selectedDepartementen.forEach(element => { this.DepID = element.ID; if (this.USERSDepIDs. ...

javascriptangulartypescriptasynchronous

Upgrading a bootstrap 3 class to bootstrap 4

Can someone help me update the classes col-sm-push-9 and col-sm-pull-3 from bootstrap-3 to bootstrap-4 in the HTML code below? <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width"> <titl ...

htmlbootstrap-4

"Employing the ScrollSpy feature in Bootstrap allows you to effortlessly monitor

Recently, I came across a document containing Bootstrap 4 code like the following: <div className="container"> <nav class="navbar navbar-expand-lg navbar-light"> <a class="navbar-brand active" aria-current="true" href="/"> ...

javascriptcssbootstrap-4scrollspy

Tips for positioning two fields side by side on a webpage with CSS

I currently have two datepickers aligned vertically and I'm looking to display them in a horizontal layout with some spacing between them. What changes do I need to make in order to present these two calendar pickers side by side on the same row? Cou ...

htmlcsslayout

"Exploring the integration of user input with a three.js canvas: Step-by

Welcome to the STL Viewer: import * as THREE from "https://threejs.org/build/three.module.js"; import {OrbitControls} from "https://threejs.org/examples/jsm/controls/OrbitControls.js"; import {STLLoader} from "https://threejs.org/e ...

javascripthtmlthree.js

Unable to bind service data to the kendoUI grid

I'm in the process of developing an angular 4 component incorporating kendoUI. While using the kendoUI grid to display json data, I've encountered a debugging issue. The service seems to be retrieving records successfully, but for some reason, th ...

angularkendo-uikendo-ui-grid

What is the best way to extract a specific element from JSON using Angular 2?

Handling a large and complex JSON object stored in a String variable can be tricky. Extracting specific elements, such as series_id and stadium, requires a clear understanding of how to navigate through the data. As a newcomer to angular2, the process mig ...

jsonangularangular2-services

What could possibly be causing routing issues in Angular 2?

Can anyone explain to me why the routing feature is not functioning properly in Angular 2? I am attempting to display a component when the URL path is empty. Below is the code snippet: http://plnkr.co/edit/Vgc2bB7Lc8h9XsuhIg6X?p=preview import { NgModul ...

angularangular2-routingangular2-template

Ways to ensure ngModel is accessible across components

I've hit a wall and I'm starting to lose my mind. I've tried all the different methods like FormsModules, ReactiveForms, FORMDIRECTIVES, Input, Output, but I just can't seem to figure out how to make ngModel work between components. My ...

javascriptangulartwo-way-bindingngmodel

Exploring the application of AJAX value within inline HTML using JINJA

My flask server responds to an AJAX call with data, which I then display dynamically in my html using the ids of the elements. Now, I want to take it a step further and change the color of the html component based on the value returned. I attempted to us ...

htmlajaxflaskjinja2

Manipulating the span of columns in an HTML TableCellElement is not supported for retrieval or

Currently, I am working on generating an HTML table within my Dart code. In this process, I am appending rows to the table using `TableRowElement` and cells using `TableCellElement`. The issue arises when I try to set the `colspan` property of these cells ...

htmldynamicdartcellhtml-table

Generate a list of files and transfer them to an input file

I am currently working on creating a drag and drop area where I can retrieve dataTransfer items using webkitGetAsEntry, and then differentiate between directories and files. My goal is to convert these files into a FileList and transfer them to a file inp ...

javascripthtmlgoogle-chromefileapi

Retrieving event.data from the input handler on a textarea element

I've spent the past few days researching this issue. Here's some context to help explain the goal: I have a textarea and I want it to detect special characters (like @) that I define as part of a dictionary. It should then display an autocomple ...

javascriptjqueryhtml

Tips for perfectly aligning heading both horizontally and vertically

https://i.sstatic.net/8ttSh.png https://i.sstatic.net/vSsH5.png My website has a header with text that I want to center both horizontally and vertically. I am currently using the 'text-center' class in Bootstrap 4, which centers the text but onl ...

htmlcssbootstrap-4

Troubleshooting the Next.js OG image meta tag issue

<meta property="og:image" content="https://mywebsite.com/images/s1.jpg" After utilizing next/head and inserting the meta tag image above, I encountered an issue where the image did not display when the link was shared. Any suggestio ...

htmlnext.jsmeta-tags

The repetition of the react nodejs page load occurs when the get method is utilized

I've successfully set up a page and function for loading the customer list. However, I'm facing an issue where adding the get method to my code results in it being called every time information is received from the URL and the page is rendered. i ...

javascripthtmlnode.jsreactjshttp-post

JavaScript CheckBox Color Change Not Functioning

Hello, I am currently experimenting with the checkAll function. When I click on the checkAll checkbox, it should select all rows and change their background color accordingly. Below is the JavaScript code I am using: function checkAll(objRef) { v ...

javascripthtmlcssgridview

Are there any specific events in PrimeNg's p-calendar that trigger when the time is changed?

In my project, I utilized PrimeNg v5.2.7 for the From Date and To Date fields. I implemented minDate validation on the To Date field. However, I encountered a scenario where if I select 30th Jan 2021 as the From Date and only adjust the time in the To Da ...

javascriptangulartypescriptcalendarprimeng