how to change style of only one line in a table css - html

Question

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-header>
<ion-toolbar color="medium">
<ion-buttons slot="start">
<ion-back-button defaultHref="folder/Inbox"></ion-back-button>
</ion-buttons>
<ion-title>بطاقة جرد الممتلكات</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-button expand="block" (click)="scan()">
<ion-icon name="qr-code-outline"></ion-icon> QR Code scanner
</ion-button>
<ion-button expand="block" color="danger" [disabled]="true">
<ion-icon name="checkmark-circle-outline"></ion-icon> تثبيت الجرد
</ion-button>
<button (click)="check()">clickme</button>
<table class="table">
<tr>
<th>مثبت</th>
<th>تفاصيل المجرد</th>
<th>تعريف المجرد</th>
<th>عدد</th>
<th>المجمد</th>
<th>فرع</th>
<th>الاصل</th>
<th>جديد</th>
</tr>
<tr
*ngFor="let item of jardTable"
[className]="checkedWithQr==true? 'checked':'notchecked'"
>
<td>
<ion-checkbox slot="end" checked="{{item.Installed}}"></ion-checkbox>
</td>
<td></td>
<!-- <td>{{qr}}</td> -->
<td id="width">{{item.productId}}</td>
<td>{{item.quantity}}</td>
<td>{{item.product}}</td>
<td>{{item.branch}}</td>
<td>{{item.origin}}</td>
<td>
<ion-checkbox slot="end" checked="{{item.new}}"></ion-checkbox>
</td>
</tr>
</table>
</ion-content>
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';
#Component({
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= {
"id":1,
"new": false,
"origin": "03",
"branch": "2",
"product": "450",
"quantity":"2",
"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;
}
}this.root.navigate(['/add-invo']);
}
}
here the CSS file
.notchecked {
background-color: rgb(196, 16, 16) !important;
color: white;
}
.checked {
background-color: green !important;
color: white;
}

Answer 1

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