I am facing an issue with highlighting a row in a table when a barcode is entered. Despite following similar scenarios and checking my code, the CSS doesn't seem to be applied. Can anyone help me figure out what I'm missing or how I can fix this?
Here is my CSS:
.found {
background-color: green;
}
This is the HTML code for my table and input field:
<table class="table table-striped">
<thead>
<tr>
<th>Description</th>
<th>Price</th>
<th>Qty</th>
<th>Barcode</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of ticket.items" [class.found]="item.Barcode === spotCheckBarcode">
<td>{{item?.ProductDetail_Name}}</td>
<td>{{item?.Amount}}</td>
<td>{{item?.Qty}}</td>
<td>{{item?.Barcode}}</td>
</tr>
</tbody>
</table>
<form role="form" [formGroup]="spotCheckForm" (ngSubmit)="spotCheck(spotCheckForm.value.itemBarcode)">
<input class="form-control" type="tel" placeholder="Enter item barcode" [formControl]="spotCheckForm.controls['itemBarcode']">
<button class="btn btn-block" [disabled]="!spotCheckForm.controls['itemBarcode'].valid && busy"><span class="glyphicon glyphicon-search"></span> Search</button>
</form>
//Here is my TypeScript component function that sets spotCheckBarcode
spotCheck(itemBarcode: number) {
let found: boolean = false;
for (var i: number = 0; i < this.ticket.items.length; i++) {
if (itemBarcode === this.ticket.items[i].Barcode) {
console.log('found!');
found = true;
this.spotCheckBarcode = itemBarcode;
}
}
if (found == false) {
console.log(`found in if statement: ${found}`);
this.showError("Item not found on ticket");
}
}