[Fixed] how to change style of only one line in a table css


I’m trying to make a simple application with ionic (angular) and I have this problem :
I have an HTML table looped with ngFor and I have a condition to verify in the ts file
if this condition is true I want only one line to change his style and give the green background-color
and like a default the background of all the line is red

in my case, if the condition this true all the line of the table "" will be green

here the HTML file

  <ion-toolbar color="medium">
    <ion-buttons slot="start">
      <ion-back-button defaultHref="folder/Inbox"></ion-back-button>
    <ion-title>بطاقة جرد الممتلكات</ion-title>

  <ion-button expand="block" (click)="scan()">
    <ion-icon name="qr-code-outline"></ion-icon> QR Code scanner
  <ion-button expand="block" color="danger" [disabled]="true">
    <ion-icon name="checkmark-circle-outline"></ion-icon> تثبيت الجرد
  <button (click)="check()">clickme</button>
  <table class="table">
      <th>تفاصيل المجرد</th>
      <th>تعريف المجرد</th>
      *ngFor="let item of jardTable"
      [className]="checkedWithQr==true? 'checked':'notchecked'"
        <ion-checkbox slot="end" checked="{{item.Installed}}"></ion-checkbox>
      <!-- <td>{{qr}}</td> -->
      <td id="width">{{item.productId}}</td>
        <ion-checkbox slot="end" checked="{{item.new}}"></ion-checkbox>

here the ts file

import { Component, OnInit } from '@angular/core';
import { BarcodeScanner, BarcodeScannerOptions } from '@ionic-native/barcode-scanner/ngx';
import { AddInvoService } from '../services/serviceAddInvo/add-invo.service';
import { Products } from '../Products';
import {Router} from '@angular/router';
  selector: 'app-add-invo',
  templateUrl: './add-invo.page.html',
  styleUrls: ['./add-invo.page.scss'],
export class AddInvoPage implements OnInit {
  checkedWithQr :boolean;
  qrcode: string;
  jardTable: Array<Products> = [];
  checkelem= {
      "new": false,
      "origin": "03",
      "branch": "2",
      "product": "450",
      "productId": "03-2-450-2",
      "Detail_product": "",
      "Installed": false
  option: BarcodeScannerOptions;
  constructor(public barcodeScanner: BarcodeScanner,
    private AddInvoService: AddInvoService,
    private root:Router) {

  check() {
    for (const iterator of this.jardTable) {
      if (iterator.productId == this.checkelem.productId) {
        this.checkedWithQr = true;
        return this.checkedWithQr;
      } else {
        this.checkedWithQr = false;


here the CSS file

.notchecked {
  background-color: rgb(196, 16, 16) !important;
  color: white;
.checked {
  background-color: green !important;
  color: white;


You can use ngClass and put your condition accordingly

<div [ngClass]="{'classname' : condition}"></div>

for more please look at this link https://angular.io/api/common/NgClass

Leave a Reply

(*) Required, Your email will not be published