I'm having trouble setting up a dynamic table where one of the cells needs to contain a progress bar. I attempted using innerHTML for this, but it's not working as expected. Any suggestions on how to approach this?
Here is a snippet from my dashboard.component.html file where the issue lies with [innerHTML]="tableRow.limitOccupancy":
<div class="divTableRow" *ngFor="let tableRow of tableRows">
<div class="divTableCell">{{ tableRow.name }}</div>
<div class="divTableCell">{{ tableRow.value }}</div>
<div class="divTableCell">{{ tableRow.previousValue }}</div>
<div class="divTableCell">{{ tableRow.delta }}</div>
<div class="divTableCell">{{ tableRow.rafLimit }}</div>
<div [innerHTML]="tableRow.limitOccupancy" class="divTableCell"></div>
<div class="divTableCell">{{ tableRow.date }}</div>
</div>
In my dashboard.component.ts file, my goal is to have the limitOccupancy display a progressBar template through innerHTML:
progressBar = '<div class="progress-bar"><span></span></div>';
tableRows = [
{
name: 'LEVEL 3',
value: '8%',
previousValue: '7%',
delta: '-11000',
rafLimit: '12%',
limitOccupancy: this.progressBar,
date: '12.09.20',
},
{
name: 'LEVEL 1',
value: '8%',
previousValue: '7%',
delta: '-11000',
rafLimit: '12%',
limitOccupancy: this.progressBar,
date: '12.09.20',
},
];