CODEWITHSUNDEEP
javascripthtmlcssangular
user7706876
user7706876

Reputation: 1

Angular2: Dynamic style two color div on the basis of HTML table column values ratio percentage

Greetings Generous Helpers. I;m very naive to angular2, I do have requirement, where I need to display ( two colored) div. as ratio-percentage difference between city Incoming\Outgoing calls data. On the basis of difference between two HTML table column values.. We have table something like..

City | Incoming Calls | Outgoing Calls | Ratio In\Out calls

New York | 4500 | 5600 | divs two colored bar- red\blue -- which will display the ratio % difference In\out call values ie 4500 and 5600

Boston | 8800 | 1200 | divs two colored bar> red\blue which will display the ratio % difference In\out call values ie 8800 and 1200

LA | 3400 | 8800 | divs two colored bar> red\blue which will display the ratio % difference In\out call values ie 3400 and 8800

Seattle | 1200 | 790 | divs two colored bar> red\blue which will display the ratio % difference In\out call values ie 1200 and 790

sorry, if I'm not able to explain it clearly...I would be looking some thing .. like 

.two-colour-bar { 
width: 60px; height: 10px; color: #fff; 
background: -webkit-linear-gradient(left, orange, orange 30%, black 70%, black);

Here 30% , 70% will be changed as per input values(of table columns..of the table.. like ... 30% and 70% will depend on Incoming calls value (4500) and outgoing calls value (5600)

City | Incoming Calls | Outgoing Calls | Ratio In\Out calls

New York | 4500 | 5600 |

and above table is in *ngFor within table inside HTML.. –

[sample look][1]

Upvotes: 0

Views: 156

Answers (1)

gutyo
gutyo

Reputation: 1

<td>
  <div class="progress">
    <div class="fill" [style.width]="incoming / outgoing + '%'">

    </div>
  </div>
</td>

.progress {
  width: 200px;
  height:  20px;
  background-color: red;
  position: relative;
}

.progress .fill{
  position: absolute;
  width: 50%;
  height: 100%;
  background-color: blue;
}

Upvotes: 0

Related Questions