Change table color based on provider database

[BarryTsai]

I want to change my table’s color like this,if I know someone take a vacation at 2018/03/29~2018/03/31. And the database just give me the Start day and the End day.

what should i do so that can be change color based on the two date?

thanks:grinning:

this is my code

.html

<ion-row col-12 class="example">
      <ion-col ><div class="name">Name</div></ion-col>
      <ion-col>{{systemday1|date:'MM/dd'}}</ion-col>
      <ion-col>{{systemday2|date:'MM/dd'}}</ion-col>
      <ion-col>{{systemday3|date:'MM/dd'}}</ion-col>
      <ion-col>{{systemday4|date:'MM/dd'}}</ion-col>
      <ion-col>{{systemday5|date:'MM/dd'}}</ion-col>
    </ion-row>
      <ion-grid>
      <ion-row  col-12 no-padding *ngFor="let Leave of absencedata" >
        
        <button (click)="openTestPage()" ><div class="name" >{{Leave.name}}</div></button>
        <ion-col [ngStyle]="{'background-color': getColor(Leave.Day1)}">{{Leave.Day1}}</ion-col>
        <ion-col [ngStyle]="{'background-color': getColor(Leave.Day2)}">{{Leave.Day2}}</ion-col>
        <ion-col [ngStyle]="{'background-color': getColor(Leave.Day3)}">{{Leave.Day3}}</ion-col>
        <ion-col [ngStyle]="{'background-color': getColor(Leave.Day4)}">{{Leave.Day4}}</ion-col>
        <ion-col [ngStyle]="{'background-color': getColor(Leave.Day5)}">{{Leave.Day5}}</ion-col>
      </ion-row>
    </ion-grid>

.ts

    this.reservice.load()
    .then(data=>{
      this.leavedetail=data;
      console.log(data);
    })//return from Loopback

  getColor(type){
    switch(type){
      case 'L':
      return '#ff6666';
      case 'B':
      return '#ffff66';
    }

provider.ts

export class RestserviceProvider {
  leavedata:any;
  baseUrl:string="http://localhost:3000/api/leavedates?filter=%7B%22order%22%3A%22Emplid%20desc%22%7D";
  constructor(public http: Http) {
    //console.log('Hello RestserviceProvider Provider');
  }

  load(){
    return new Promise(resolve=>{
      this.http.get(this.baseUrl)
      .map(res=>res.json())
      .subscribe(data=>{
        this.leavedata = data;
        resolve(this.leavedata);
      })
    })
  }
}

and the data is writing at mysql like this

thanks a lot