Effective Ways to Transfer Data from Angular to CSS in an HTML Table

Question

Effective Ways to Transfer Data from Angular to CSS in an HTML Table

I am working on an Angular web app that includes an HTML table. The data for this table is retrieved from a database via a service and displayed as text.

One of the columns in the table represents a Status, which I want to visually represent as a colored circle instead of plain text. For example, if the cell value is "green", it should display a green circle.

Below is my current approach:

CSS (Component Styles snippet):

:host ::ng-deep td.circle { 
  text-align: center;
  font-size: 0;
  background-color: RED;  <---  need to pass param here
}

The column styling is defined as follows:

.circle {
  border-radius: 50%;
  height: 24px;
  width: 24px;
}

HTML:

<app-table [attrs]="serviceapi" [monthSelected]="monthSelected" ></app-table>

Corresponding TypeScript code for the table: In the constructor:

this.data =  {
  headers: [],
  rows: []
};

ngOnInit() {
  this.tableMetricsService.getTableMetrics(
     JSON.parse(this.attrs).api,
     this.monthSelected
  ).subscribe(response => {
    this.data = response;
    }
  );
}

Does anyone have suggestions for translating cell values into corresponding CSS background colors?

Thanks in advance,

Oleg.

css angular typescript

Answer 1

Answer №1

This code snippet was successful for me:

<div *ngIf="cell.styleClass == 'circle'" [ngStyle]="{'background-color': cell.value}" [ngClass]="cell.styleClass">
              </div>

Answer 2

This code snippet was successful for me:

<div *ngIf="cell.styleClass == 'circle'" [ngStyle]="{'background-color': cell.value}" [ngClass]="cell.styleClass">
              </div>

Answer 3

Answer №2

One option is to add a data attribute to the HTML and create a corresponding selector:

[data-status="green"] {
  background: green;
}

[data-status="red"] {
  background: red;
}

<div data-status="green">Green</div>
<div data-status="red">Red</div>

However, using a regular CSS class may be just as effective without the need for extra attributes:

.green {
  background: green;
}

.red {
  background: red;
}

  <div class="green">Green</div>
  <div class="red">Red</div>

Answer 4

One option is to add a data attribute to the HTML and create a corresponding selector:

[data-status="green"] {
  background: green;
}

[data-status="red"] {
  background: red;
}

<div data-status="green">Green</div>
<div data-status="red">Red</div>

However, using a regular CSS class may be just as effective without the need for extra attributes:

.green {
  background: green;
}

.red {
  background: red;
}

  <div class="green">Green</div>
  <div class="red">Red</div>

Effective Ways to Transfer Data from Angular to CSS in an HTML Table

Answer №1

Answer №2

Similar questions

I have integrated ng-bootstrap and ngbDatepicker for the calendar feature, and I am looking to automatically increase the end date by one day whenever I select a start date from the calendar

Limit the utilization of toString through a TypeScript interface or type

Is there a more efficient method for providing hooks to children in React when using TypeScript?

Incorporating an external module into your Angular application for local use

How do I change the alignment of X axis labels in an Asp.net chart to be left-aligned instead of centered?

Arranging pictures in both vertical and horizontal alignment (CSS)

Best practice for saving a User object to the Request in a Nest.js middleware

Utilizing Smarty Template: Combining <li> elements from separate <ul> tags for a seamless display

The rules for prioritizing CSS selectors

Incorporating Bootstrap into a fresh project

NestJS Resolver Problem: Getting an Undefined Error

Ensure that the fixed element adheres to the overflow:hidden property

The Typescript counterpart to PropTypes.oneOf, utilizing a pre-existing variable

Mastering the use of Quasar variables in your scss styles is crucial for optimizing your

Navigating between child nodes in an HTML drop down list with multiple options and hierarchical structure

Displaying a default input placeholder in Kendo UI Datepicker for Angular 2

Creating type definitions for recursive functions in TypeScript

Instructions on uploading a PDF file from a Wordpress page and ensuring the file is stored in the wp-content upload directory folder

Imitate a Node.js Proxy

What is the process for setting the active state for HtmlBodyElement?