Applying CSS dynamically to a mat-cell in Angular 6

In my material table, I need to apply specific CSS classes based on the content of the cell. https://i.sstatic.net/YN6EO.png

These are the CSS classes that I am using

.status-code{
    flex: 0 0 10% !important;
    width: 10% !important;
}

.status-code-success{
    flex: 0 0 10% !important;
    width: 10% !important;
    background: rgb(196,214,160);
    color: rgb(80,99,42);
}

.status-code-failed{
    flex: 0 0 10% !important;
    width: 10% !important;
    background: rgb(229,185,181);
    color: rgb(97,38,33);
}

.status-code-empty{
    flex: 0 0 10% !important;
    width: 10% !important;
    background: rgb(216,216,216);
}

Below is the HTML code snippet

<ng-container matColumnDef="Warehouse">
                <mat-header-cell class="status-code" *matHeaderCellDef> Warehouse </mat-header-cell>
                <mat-cell class="{{row.warehouse}} == 'Success' ? status-code-success : ({{row.warehouse}} == 'Failed' ? status-code-failed : status-code-empty)" *matCellDef="let row"> {{row.warehouse}} </mat-cell>
            </ng-container>

            <ng-container matColumnDef="DPI">
                <mat-header-cell class="status-code" *matHeaderCellDef> DPI </mat-header-cell>
                <mat-cell class="{{row.dpi}} == 'Success' ? status-code-success : ({{row.dpi}} == 'Failed' ? status-code-failed : status-code-empty)" *matCellDef="let row"> {{row.dpi}} </mat-cell>
            </ng-container>

However, when I have only one row with 'Success' in the Warehouse cell, it shows up with a pink background.

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

I'm not sure what's causing this issue. Can someone please help me figure out what might be wrong?

cssangularangular-materialmaterial-design

Answer №1

Implement this solution by utilizing [ngClass].

When using ngClass, remember to make the following adjustments:

* Remove the curly braces {} around each variable
*. Enclose all class names in single quotes. 

<ng-container matColumnDef="Warehouse">
    <mat-header-cell class="status-code" *matHeaderCellDef> Warehouse </mat-header-cell>
    <mat-cell [ngClass]="row.warehouse == 'Success' ? 'status-code-success' : (row.warehouse == 'Failed' ? 'status-code-failed' : 'status-code-empty')"
         *matCellDef="let row"> {{row.warehouse}} </mat-cell>
</ng-container>

<ng-container matColumnDef="DPI">
    <mat-header-cell class="status-code" *matHeaderCellDef> DPI </mat-header-cell>
    <mat-cell [ngClass]="row.dpi == 'Success' ? 'status-code-success' : (row.dpi == 'Failed' ? 'status-code-failed' : 'status-code-empty')"
         *matCellDef="let row"> {{row.dpi}} </mat-cell>
</ng-container>

Please address the typo in the class name.

Replace .status-code-succsess with .status-code-success

.status-code-success{
    flex: 0 0 10% !important;
    width: 10% !important;
    background: rgb(196,214,160);
    color: rgb(80,99,42);
}

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

What is the best data type in Asp Net Core C# for capturing Angular's blob object?

I am working with an image BLOB object in Angular 5 and need to send it to the backend via an API. In previous versions of Asp.Net, there was 'HttpBaseType' for this purpose, but it is not available in Asp.Net core. Which data type should be use ...

c#angularasp.net-core

Tips for changing the color of shapes when hovering over an image state

I have arranged three images in a column and applied column-count: 3; along with setting border-width for those images. Now I am curious about how to create the hover state for these images. Here is the HTML code snippet: <div class="wrap"> < ...

htmlcss

What advantages does asynchronous microservices communication offer when it comes to enhancing the user interface experience?

When working with my Angular UI, I make a call to an API gateway endpoint like this: this.http.post(`/order`).subscribe(order => addNewOrderToList(order)); Following best practices in microservices architecture, the /order handler should publish an ev ...

springangularasynchronousmicroservicesevent-driven

Is it true that Angular 4 routers only maintain a single state during navigation?

After transitioning from state A to state B in my application, I noticed that when navigating back to state A, it seems to reload. Does this mean that State A is being destroyed during the transition to state B? If so, how can I prevent State A from relo ...

angulartypescript

Limiting the scrolling capability within a flex container by using the nowrap

When using flex with nowrap, it appears that the horizontal scroll bar only allows moving to the right while the items on the left remain hidden. To demonstrate this issue, I have created a sample on CodePen: http://codepen.io/anon/pen/QpgvoZ This behavio ...

cssflexboxscrollbarnowrap

The problem with uploading files in Angular4 (with multer on the server)

In my current project, I encountered an issue where the front end file was not getting transferred to the server side after finishing both the front end and back end logic. Despite spending more than an hour debugging, I couldn't pinpoint the exact ca ...

angularexpressfile-uploadreduxmulter

An issue was encountered in the browser.js file located in the node_modules directory for the @angular/animations package

While attempting to create a data table using Angular Materials and CRUD functionalities, an error occurred after installing npm toast (ngx-toastr). The error message displayed was: ERROR in ./node_modules/@angular/animations/ivy_ngcc/fesm2015/browser.js ...

node.jsangular

Exploring Bootstrap: the ins and outs of customizing styles

How can one determine which bootstrap styles need to be overridden when customizing the appearance? Is there a trick to identifying where to set styles in order for them to take precedence over bootstrap styles? For instance, I've been struggling fo ...

htmlcssbootstrap-4

Angular Universal functioning fine on local host, yet encountering issues on Nginx Server

I recently developed a project with Angular Universal. After building the project, it generated files such as browser, server, server.js, and prerender.js. I am curious to learn how I can run this project on an nginx server. Currently, I create a build o ...

javascriptangularnginxuniversal

Include a horizontal line divider between each row of items that wrap to the next line

I am utilizing CSS flexbox to arrange a variable number of items in rows, wrapping around to additional rows as necessary. My query is, can a horizontal line be inserted between each of the rows? Here you can find a basic example of what I am working on. ...

htmlcssflexbox

Tips on utilizing Twitter Boootstrap's form validation tooltip messages

Before anything else, let me clarify that I am not inquiring about creating tooltips from scratch using Bootstrap's javascript guide, which can be found in the documentation. I recently utilized type="email" with version v3.3.1. It automatically vali ...

javascriptcsshtmltwitter-bootstraptwitter-bootstrap-3

Failed attempt to install Angular Material

On my Windows laptop, I am currently using the following versions: Angular CLI: 9.1.15 Node: 16.16.0 OS: win32 x64 Windows 10 When I try to add Angular Material using the command ng add @angular/material, it runs without any issues. However, after the i ...

angularangular-material

Implementing a onClick event to change the color of individual icons in a group using Angular

I have integrated 6 icons into my Angular application. When a user clicks on an icon, I want the color of that specific icon to change from gray to red. Additionally, when another icon is clicked, the previously selected icon should revert back to gray whi ...

angulartypescriptonclickclickangular-directive

Is it possible to activate a block display for an article based on the class value when a radio

Here is the HTML code snippet I'm working with: <div id="contentapp"> <input type="radio" name="menu" id="interest" checked> <input type="radio" name="menu" id="about"> <div id="tab"> <label for="intere ...

htmlcss

Accordion menu designed exclusively with JavaScript

Implementation of required menu structure: Main Menu Submenu Contacts News Photo Submenu Submenu Submenu Main Menu Main Menu Main Menu When clicking on the "Main Menu" button, a list of "Submenu" elements opens. Clicking on the "Submenu" button ope ...

javascripthtmlcss

Using Java beans to present form data utilizing session

How can I utilize Java Beans and session beans to store user input data and display a preview of the entered details on the next page? I have already created a servlet using JSP, but now I want to incorporate Java Beans to showcase the form data. How shoul ...

javascripthtmljquerycssjavabeans

Tips for getting flex-end to function properly in IE11

My attempt to implement justify-content: flex-end; for a DIV with hidden overflow content in IE11 was unsuccessful. Despite trying various approaches, I managed to create a basic code snippet that functions properly in Chrome but fails in IE11: .token- ...

htmlcssflexboxinternet-explorer-11

Using wildcard parameters with @angular/router to achieve dynamic routing flexibility

Currently using @angular/router version 2.0.0-rc.1 and struggling with wildcard parameters. Despite my efforts, it seems like there is no support for wildcard params based on my code analysis. Is it safe to assume that the rc.1 router doesn't have ...

angularangular2-routing

What are some ways to control providers in targeted tests using ng-mocks?

I recently started utilizing ng-mocks to streamline my testing process. However, I am struggling to figure out how to modify the value of mock providers in nested describes/tests after MockBuilder/MockRender have already been defined. Specifically, my que ...

angulartypescriptunit-testingng-mocks

What's preventing me from using the left click function on my published blog post?

This is my first time creating a blogger template and everything seems to be working correctly. However, I have encountered one problem. For some reason, I am unable to left click on my blog post. I have not installed any right/left click disabler and I&a ...

javascripthtmlcssblogsblogger