Alter the background color of a table cell in Angular HTML depending on a boolean value

Attempting to use Angular ng-class to set the background color of a table cell. I'm referencing code snippets from these resources:

  • Angular: How to change the color of cell table if condition is true

  • Change HTML table cell background color using Angular JS

  • Using Angular version 9.1.3

  • Material version ~9.1.3

I have defined my styles in the app.component.scss file :

.routeRed {
  background-color: red; 
}

.routeGreen {
  background-color: green;
}

I am importing the app.component.scss file using standard Angular practices :

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})

Here's how I structured my app.component.html : The <table> is placed within an Angular Material mat-tab, but this shouldn't affect the application of scss styles.

<table border="1" class="table" id="idTableCamelRoutes" matSort
    (matSortChange)="sortRoutes($event)" style="width: 100%">
    <thead>
        <tr>
            <th mat-sort-header="routeId">Route Id</th>
            ...Omitted for conciseness...
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let item of applicationState.camelRoutes">
            <td>{{ item.routeId }}</td>
            <td>{{ item.routeStatus }}</td>
            <td ng-class="{'routeRed' : !(item.routeRunning), 'routeGreen': item.routeRunning}">{{item.routeRunning}}</td>
            <td>

The ngFor loop iterates over a collection of CamelRouteBean objects :

export class CamelRouteBean {
  routeId: string;
  routeStatus: string;
  routeRunning?: boolean;
  description?: string;
}

I am using item.routeRunning (a boolean) for ng-class...I have confirmed that item.routeRunning is correctly set to true or false. The app.component.scss file is also successfully loaded. However, regardless of what I attempt, the background color of the Table Cell stays white. When inspecting the Element in Chrome, no styles are found to be applied to the table cell(s).

What could I be overlooking?

Thank you in advance adym

Answer №1

Here is an example of how you can achieve the desired result:

<div
  [ngClass]="{
  'routeGreen': item.routeRunning,
  'routeRed': !item.routeRunning
}"
></div>

Answer №2

It appears to be a simple error. Update your ng-class to [ng-class]. For additional information, refer to an example on stackblitz here: CLICK 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 utilize onclick for various table cells in jQuery?

I have a situation where I need to loop through dates and display table content accordingly. Could someone please assist me in figuring out how to do this? index.html.erb <% @batches.each do |batch| %> <tr> **<td class = "pie" id ...

Mobile devices are having issues with CSS rendering

I've encountered an issue with my CSS code. It seems to be working fine until the @max-width:767 media query, but then it stops working on the resolution immediately below it, which is @425. However, it starts working again on resolutions below that. ...

Tips for adjusting the color of a pin without altering anything else

I have a Google Marker with a default design. By default, I can create the pin with letters inside it. However, I want to change the color of this pin. So, I attempted to use this icon: https://i.sstatic.net/gFXMR.png Unfortunately, the letters shifted ...

Is there a way to extract a variable value from an external webpage in order to manipulate

Although I am not well-versed in PHP, I believe it may be the most suitable solution for achieving my goal. I want to extract the value of a variable from an external page in order to process it for generating graphs and statistics on my own webpage. The s ...

"Utilize Angular's functionality to include labels for checkboxes generated using *ngFor directive

I am currently working with Angular 5 My goal is to generate multiple checkboxes using the code below and provide them with labels <input type="checkbox" *ngFor = "let v of options[0].options" [value]="1" [name] = "1"> Typically, when working with ...

Can you please provide the CSS code that would style this table in a similar manner?

I am interested in utilizing the design of this table, but how can I update it to meet CSS standards and HTML5 equivalents? <html> <head></head> <body> <table border="1" bordercolor="#000000" style="background-color:#ffffff" w ...

Error message: "Function call failed in Angular model getter"

Here is the structure of my model: export class User { public username: string; private email: string; constructor() { this.username = undefined; this.email = undefined; } public getUsername(): string { return this.u ...

I am having trouble getting the pagination to function properly on my custom materialize projects

I am experiencing issues with the list of sub-pages on the official demo sites: Materialized Materialize(css) The navigation bar does not update the active page number or content when clicked. Both websites are using materialize css. If you click ...

Tips on halting the current animation and modifying styles upon hovering

Currently, I have a basic label featuring a contact number with a blinking animation. However, the animation is only a simple color transition at this time (see code below). I have managed to successfully pause the animation and revert the text back to it ...

The jQuery function .val()/.text() is unable to retrieve information from a particular section of HTML

Implementing HandlebarsJS with PHP and Yii to generate a page. Here is a snippet of the html/handlebars code on the page {{#if embed_link}} <p class='f_hidden_p'> <a href='{{embed_link}}'> {{ ...

Capture microphone and audio in a SIP call with sip.js

Greetings Stack Overflow community! I am in need of assistance with a project involving sip.js and VoIP for making real phone calls. The Objective I aim to enable users to record audio from both parties during a call and save the data on a server (either ...

Animate all shapes in SVG to rotate around a central pivot point

I am looking for a simple way to make an SVG graphic rotate around its center point. The rotation doesn't need to be smooth, just a 90 degree turn and back every second. https://i.sstatic.net/H6CTF.png Here is the SVG code: <?xml version="1.0" e ...

Guide on placing images in a grid using CSS

Exploring a new way to arrange images in grid style with a box underneath. Seeking advice on achieving this specific layout shown in an image. Current progress in positioning can be seen in this screenshot. Desired adjustments include aligning the far ri ...

Ways to eliminate HTML elements from one HTML content to another

The HTML code provided is as follows: <dl class="item-options"> <dd class="truncated" style="color:red;">DSOX3000-232, RS232/UART Serial Decode and Trigger - in <a onclick="return false" class="dots" href="#">...</a>/&l ...

Utilizing flexbox for dynamic width adjustment with flex-grow functionality

Currently, I am in the process of configuring a menu bar using this particular template I have been attempting to achieve this layout utilizing FlexBox, but it appears that there is an issue. Here is the HTML code: <nav> <ul> < ...

Ensure that a div remains active even after it has been selected through AJAX using jQuery

I am currently utilizing ajax to display information from a database. The application I am working on is a chat app, where clicking on a specific conversation will append the data to a view. The structure of my conversation div is as follows: <div clas ...

Connecting buttons to JavaScript functions that interact with MySQL database entries

I am working on a task involving rendering a database table using XMLHttpRequest in JavaScript to a PHP page. My goal is to display each entry from the table as an HTML row/cell with two buttons within each "entry". These buttons should trigger specific Ja ...

Creating a responsive design for a centered image with absolute positioning

I'm trying to align an image at the bottom of a div while also centering it using the following CSS: HTML: <div class="myDiv"> <img src="http://bit.ly/1gHcL8T" class="imageCenter" /> </div> CSS: .myDiv { width: 80%; height: ...

Tips on configuring commas in the Prettier extension within Visual Studio Code

My CSS file is causing me some trouble. I am trying to configure Prettier in VS Code so that when I write a comma, the selector I entered stays in line with the previous one. However, whenever I save the file, the selector gets moved to the next line. My ...

Lose yourself in the horizontal beauty of the CSS menu

Currently, I am working on an application using ASP.Net MVC4, jquery 1.9, and CSS 2.1. However, I have encountered an issue with the horizontal menu display. Whenever a form with a jquery component is shown, some buttons seem to disappear behind the menu, ...