0

I am designing progress bar showing how much delivery is completed in percentage. I am able to design the the progress bar, but I don't know the way to change the text font color depending on bar's background color.

<div class="progress">                      
   <div class="bar" [style.width.%]="row[column?.value]">                                                
   </div>                      
   <div class="percent-container">
      <p class="percent">{{row[column?.value]}}%</p>
   </div>
</div>

For eg : enter image description here

In above image '50' should display in white and percent symbol in black, If backgound is completely blue i.e 100% then entire text should display in white.

I am getting output like this, but i need inverting font color depending on background

enter image description here

The width will vary for each record in table. Here is sample codepen link: https://codepen.io/Surendra_Mourya/pen/NWdpMep

Surendra Mourya
  • 593
  • 3
  • 8
  • 29
  • You can add class to `progress` depending on `column?.value`. For example `column?.value > 25 ? 'progress-red' : 'progress-green'` and add those classes to your css where you can apply your colors for font and progress bar – ciekals11 Apr 02 '21 at 07:29
  • I cannot apply conditions because the background color is changing depending on width input – Surendra Mourya Apr 02 '21 at 07:55
  • width of input is changing with `column?.width` so why class cannot? – ciekals11 Apr 02 '21 at 08:51

1 Answers1

0

It is possible to use [style.color] to set color's property:

<div class="progress">                      
   <div class="bar" [style.width.%]="row[column?.value]">
   </div>                      
   <div class="percent-container">
      <p class="percent" 
          [style.color]="1 < 2 ? 'grey' : 'deeppink'">{{row[column?.value]}}%</p>
   </div>
</div>

or apply styles conditionally:

<p class="percent" 
    [ngClass]="('foo'=='bar')?'foo-class':'another-class'"> 
    {{row[column?.value]}}%
</p>
StepUp
  • 36,391
  • 15
  • 88
  • 148