Custom sass with Ts variable?-CodePudding

I'm working on an Angular project and I have three cards and a progress bar inside. The operation for getting the % is here

cards.component.ts

nbLessonsFinish(){
  return 3 //My future code here (boolean)
}

nbLessonsInChapter(){
  return 10 //My future code here (boolean)
}

percentage(){
  let prc = (( this.nbLessonsFinish() / this.nbLessonsInChapter()) * 100)
  return prc //Percent to set in scss 
}

 cards.component.scss

.CSS svg circle:nth-child(2) {
stroke-dashoffset: calc(865 - (865 * (my-ts-variable))/ 100);
}

.HTML svg circle:nth-child(2) {
stroke-dashoffset: calc(865 - (865 * (my-ts-variable)) / 100);
}

.ALGORITHMIQUE svg circle:nth-child(2) {
stroke-dashoffset: calc(865 - (865 * (my-ts-variable)) / 100);
}

My question is : How can I pass the 'prc' in .ts to .scss ? And if I can't how can i resolve this ??

Extra : Hope it was clear , thanks a lot for helping me

CodePudding user response：

you can use ngclass to apply different css for different conditions, as you dont provide much info I will just give you idea how it works

<div [ngClass]="{'classname' : condition}"></div>

so something like

<div [ngClass]="{'CSS': percentage() === 40, 
                 'HTML': percentage() === 60, 
                 'ALGORITHMIQUE': percentage() === 100}"></div>