How to change the colour of the Slider Pager Dots Dinamically?

Ionic Framework ionic-v3
1

I want to change the color of the pager dots depending on a number that is passed in navParams currently I can change other elements in my HTML dynamically with the use of ngStyle or the style tag on the elements themselves. Currently i can style elements that are visible like this for example: [style.color]=“weekColor” or [ngStyle] = “{‘background’: ‘linear-gradient(’+weeklySessionsColors[weeklySession.week]+’,’+weeklySessionsColors[0]+’),
url(…/assets/imgs/Session-Card-Images/week-’+weeklySession.week+’.jpg)’}”

I can only set it permanently like this:
.swiper-pagination-bullet-active {
want to something like this background-color: {{weekColor}};
instead of setting to a single color background-color: purple;
}
and such but unfortunately ionic inner items like the pager in slides are not accessible to me to do what I am doing on it. I can only change the color of the page to a single color permanently. Any help will be appreciated.

Kind Regards,
Nafis

2

you can use ngClass attribute. i know its long patch work but its work :wink::wink:

html

[ngClass]="GetColor(yourValue)"

ts

GetColor(status) {
    if (status == 1) {
      return "pending";
    }
    else if (status == 2) {
      return "approve";
    }
    else {
      return "other";
    }
  }

scss


#complaint .pending {
.swiper-pagination-bullet-active{
    background: #f2dede;
    }
}

#complaint .approve {
    .swiper-pagination-bullet-active{
    background: #f2dede;
    }
}

#complaint .other {
    .swiper-pagination-bullet-active{
    background: #f2dede;
    }
}