Angular: how to style completed steps in PrimeNG p-steps component?-CodePudding

I am trying to use the p-steps component in PrimeNG. I want to have different styling for the completed and not-completed steps. That is, if the user is currently at step 3, then step 1 & 2 are completed and I would like to set a background color green. I noticed that PrimeNG 14 no longer supports p-steps-complete.

My implementation of the component is pretty basic:

<p-steps
  #stepModule
  [model]="items"
  [readonly]="false"
  [activeIndex]="stepEvent.stepIndex">
</p-steps>

Thank you

CodePudding user response：

As PrimeNG 14 no longer supports p-steps-complete, the only chance is use css

Imagine in styles.css some like

.p-steps.completed-1 .p-steps-item:nth-child(-n   1) .p-menuitem-link .p-steps-number,
.p-steps.completed-2 .p-steps-item:nth-child(-n   2) .p-menuitem-link .p-steps-number,
.p-steps.completed-3 .p-steps-item:nth-child(-n   3) .p-menuitem-link .p-steps-number,
.p-steps.completed-4 .p-steps-item:nth-child(-n   4) .p-menuitem-link .p-steps-number
{
  background:red;
  color:white;
  border: 1px solid crimson;
}

In this way you can to have a variable "completed"

completed=0;

And your p-steps use styleClass

<p-steps [model]="items" 
         [(activeIndex)]="activeIndex" 
         [readonly]="false" 
         [styleClass]="'completed-' completed">
</p-steps>

So, when you change the variable "completed" to 1,2,3 or 4 your see the styles applied

See stackblitz

Updated if we want the "active" not get the color we can use :not(.p-highlight)

.p-steps.completed-1 .p-steps-item:nth-child(-n   1):not(.p-highlight) .p-menuitem-link .p-steps-number,
.p-steps.completed-2 .p-steps-item:nth-child(-n   2):not(.p-highlight) .p-menuitem-link .p-steps-number,
.p-steps.completed-3 .p-steps-item:nth-child(-n   3):not(.p-highlight) .p-menuitem-link .p-steps-number,
.p-steps.completed-4 .p-steps-item:nth-child(-n   4):not(.p-highlight) .p-menuitem-link .p-steps-number
{
  background:red;
  color:white;
  border: 1px solid crimson;
}