I need assistance with highlighting specific table cells in Angular, rather than the entire row. Can someone provide guidance on how to achieve this?
Here is a snippet of my code:
// ********** DATA TABLE ARRAYS **********//
private beforeMonthsColumns: EditColumns[] = [
{ attribute: 'kagName', name: 'Erlöse / Kosten', object: null, disabledRanges: false },
{ attribute: 'kagNumber', name: 'KAG', object: null, disabledRanges: false }
];
private monthColumns: EditColumns[] = [
{ attribute: '1', name: 'Jan', object: 'values', disabledRanges: true },
...
{ attribute: '12', name: 'Dez', object: 'values', disabledRanges: true }
];
private afterMonthsColumns: EditColumns[] = [
{ attribute: 'currentYear', name: '', object: 'values', disabledRanges: true },
{ attribute: 'note', name: 'Anmerkung', object: null, disabledRanges: false },
];
public rowHighlightStyleColor(formControl: FormControl) {
return formControl.value ? this.changeColorService.defaultStyles.firstDesignFontColor : null;
}
public rowHighlightBackgroundColor(formControl: FormControl) {
return formControl.value ? this.changeColorService.defaultStyles.firstDesignBackgroundColor : null;
}
private loadData() {
...
if (null !== data && data && yearlyBwaResults && yearlyBwaResults !== null) {
this.mandantKagIds = data.map((d) => d.mandantKagId);
const rows = [];
const bwaMonthData: string[] = [];
const bwaNames = _.uniq(data.map((d) => d.kagName)) as string[];
for (const n of bwaNames) {
bwaMonthData[n] = data.filter((d) => d.kagName === n);
if (bwaMonthData[n].length > 0) {
// console.log('bwaMonthData:', bwaMonthData[n][0]);
const row: any = { kagName: bwaMonthData[n][0].kagName, kagNumber: bwaMonthData[n][0].kagNumber, values: {}, note: '' };
const dbNrStr = `${bwaMonthData[n][0]['db-nr']}`;
row['highlight'] = (dbNrStr.length === 7); // Here I highlighted the rows
// console.log('row:', row);
rows.push(row);
}
}
this.data = rows;
}
...
}