Add CSS in Angular based on dynamically populated HTML-CodePudding

Brand new to Angular with little front-end experience. I'm not even sure where to start. I have a mat-table with a hard-coded datasource (linking to DB in the future) where I need to change the background color of cells in a column based on whether display "pass" or "fail." Where do I even begin with this? I understand the logic is:

if (result == "pass") { add green styling}
else {add red styling}

However, how does this translate into reality with Angular? Thanks

CodePudding user response：

NgStyle would be the best approach to use. Check out the example below:

<div [ngStyle]="{'background-color': result === 'pass' ? 'green' : 'red' }"></<div>

If the result equals 'pass', the background color of your div will be green, alternatively, it will be red.

For more information, click here.

CodePudding user response：

Since you are not providing a reproducible example, I'm going to take an example from the official Angular Material table docs.

Given this table, you could add whatever style you want to each of your cells given a condition like this:

component

import { Component, VERSION } from '@angular/core';

export interface PeriodicElement {
  name: string;
  position: number;
  weight: number;
  symbol: string;
}

const ELEMENT_DATA: PeriodicElement[] = [
  { position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H' },
  { position: 2, name: 'Helium', weight: 4.0026, symbol: 'He' },
  { position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li' },
  { position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be' },
  { position: 5, name: 'Boron', weight: 10.811, symbol: 'B' },
  { position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C' },
  { position: 7, name: 'Nitrogen', weight: 14.0067, symbol: 'N' },
  { position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O' },
  { position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F' },
  { position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne' },
];

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  name = 'Angular '   VERSION.major;
  displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
  dataSource = ELEMENT_DATA;
}

template HTML

<table mat-table [dataSource]="dataSource" >
  <ng-container matColumnDef="position">
    <th mat-header-cell *matHeaderCellDef>No.</th>
    <td mat-cell *matCellDef="let element">{{ element.position }}</td>
  </ng-container>

  <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef>Name</th>
    <td mat-cell *matCellDef="let element">{{ element.name }}</td>
  </ng-container>

  <ng-container matColumnDef="weight">
    <th mat-header-cell *matHeaderCellDef>Weight</th>
    <td mat-cell *matCellDef="let element">{{ element.weight }}</td>
  </ng-container>

  <!-- HERE -->
  <ng-container matColumnDef="symbol">
    <th mat-header-cell *matHeaderCellDef>Symbol</th>
    <td 
      [ngStyle]="{ 
        'background-color: element.symbol === 'pass' ? red : green' 
      }" 
      mat-cell 
      *matCellDef="let element">{{ element.symbol }}
    </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
</table>

CodePudding user response：

you can create 2 div tags with background color as follows

<div class='controller' ng-controller='myController'>
<div style='background-color:red' ng-show='isShowRedDiv'></div>
<div style='background-color:green' ng-show='isShowGreenDiv'></div>
</div>

code angularjs:

var app=angular.module('app',[]);
app.controller("myController",function()
{
$scope.isShowRedDiv=false;
$scope.isShowGreenDiv=false;
if(result=="pass"){
$scope.isShowRedDiv=true;
}else{
$scope.isShowGreenDiv=true;
}
});

ng-show used to display an element , if the condition of ng-show=true then it will be displayed