How do I get the background color from typescript file in angular and bind it to my html page?

Question

I have an array that is being populated in typescript and based on the value in the array, I want to set a different background color for my div but it\'s not working. What

Answer 1

I think the style binding should be: [style.background-color]="statusColor[i]"

If you want to improve your code, I would suggest you to use a pipe to do the processing. Pipe is really performance friendly too.

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'complaintBgColourPipe'
})
export class ComplaintBgColourPipe implements PipeTransform {
  transform(value: string): string {
    switch (value) {
      case 'Reported': {
        return 'red';
      }

      case 'Resolved': {
        return 'green';
      }

      case 'In progress': {
        return 'yellow';
      }

      default: {
        return '';
      }
    }
  }
}

Since you're going loop through all your complaints array, you can just pass the status in and pipe it.

Answer 2

Try ngStyle as follows

[ngStyle]="{'background-color': statusColor[i]}