Changing the step symbol background color programatically based on a condition

[Gevko]

Hello,

I am using your wizard in my project, and I need to change the background color of some completed steps based on a condition. I've a form inside of each step, and when the wizard is completed is done a API order that will return all the errors of each form and the step in which each form has errors. So I need to mark each step that has errors in order to inform the use, and I want to mark it changing the color of the step symbol background color.
How could I archieve this behaviour?
I know already how to change the background color of the steps using:
:host::ng-deep aw-wizard-navigation-bar.horizontal.large-filled-symbols ul.steps-indicator li.done:after { background-color: red !important; }
but this changes the background color of all completed steps. Could you help me?

Best regards, Gevko.

[madoar]

There are two ways I see you could do this:

1. You could add an additional id to each wizard step. This would then allow you to specify the step in css
2. You could try to use the current development version (4.0.0), which you can find on the develop branch. This new version will add a new [awWizardStepSymbol] directive, which allows you to specify the navigation symbol for each wizard step inside the template, see also here.

[Gevko]

Hello again,

Thank you for your answer,

I've already tried the first solution, but the way I did it, it didn't work (i might do something wrong).

I've added a id for the first step, and then tried to reference it in the css like this:
:host::ng-deep aw-wizard-navigation-bar.horizontal.large-filled-symbols ul.steps-indicator li.done:after { #step1 { background-color: red !important; } }

Also, I've tried to put the #step1 tag like this:
:host::ng-deep aw-wizard-navigation-bar.horizontal.large-filled-symbols ul.steps-indicator li.done.navigable:after #step1{ background-color: red !important; }

But this didnt worked.

I will try the second solution too, but for the first solution the way I've tried to get there didnt worked.

Thanks.

[madoar]

Sorry that was my fault, the first way can't work, because the navigation bar is a different element, which doesn't inherit the ids from the wizard steps.

Please try the second way, it should work. Be aware that you need to build version 4.0.0 currently yourself, because it's still in development (I would like to have #166 and #181 merged before the next release).

[Gevko]

Sorry to ask, but how can I build this version by myself into my angular project?

[madoar]

You should be able to build it via npm run build -prod.
Afterwards you can install it in your project via npm install path/to/angular-archwizard/dist.
If you have any problem feel free to ask.

[Gevko]

Right, but where do I run each of the commands? Inside of my project directory?

[madoar]

You run the first command inside your angular-archwizard clone (don't forget to check your branch).
You run the second command inside your target application in which you want to install/use angular-archwizard.

[Gevko]

Well, I've done all as you said, but also I needed to install the node_modules of the angular-archwizard (clone) with npm install, so I've done that, builded the clone and installed it in my project, but now I've an warning when compiling my project:

WARNING in C:/Users/oleksandr.gevko/Desktop/angular-archwizard-develop/node_modules/@angular/core/fesm5/core.js
4982:15-36 Critical dependency: the request of a dependency is an expression

WARNING in C:/Users/oleksandr.gevko/Desktop/angular-archwizard-develop/node_modules/@angular/core/fesm5/core.js
4994:15-102 Critical dependency: the request of a dependency is an expression

And the component when I'm using the wizard has this error:

ERROR Error: Uncaught (in promise): Error: StaticInjectorError(AppModule)[NgIf -> ViewContainerRef]:
StaticInjectorError(Platform: core)[NgIf -> ViewContainerRef]:
NullInjectorError: No provider for ViewContainerRef!
Error: StaticInjectorError(AppModule)[NgIf -> ViewContainerRef]:
StaticInjectorError(Platform: core)[NgIf -> ViewContainerRef]:
NullInjectorError: No provider for ViewContainerRef!
at NullInjector.push../node_modules/@angular/core/fesm5/core.js.Null

And I can understand that this error is based on the warning i received.

What do you think it could be?

[madoar]

The first two messages are simply warnings, you can ignore them for the moment (I can't say on the fly why they appear).
The second message is an error. If I remember correctly it occurs because you've installed angular-archwizard in your project via npm install which leads to the creation of a symlink, which angular doesn't seem to like.

Try to build your application (not angular-archwizard) with the --preserve-symlinks option.

[Gevko]

This worked, and I'm almost into the solution I need. Inside of my step i've <ng-template awWizardStepSymbol> <span id="step1Title">1</span> </ng-template>

And I can change the background color of the symbol using:
const steptitle1 = document.getElementById('step1Title'); steptitle1.style.backgroundColor = 'red';

This changed the span background color, but can I change the color of the inside of the circle?
Like the green color to be red here:

And the dark-gray(color of step i am in) and gray colors be changed to red?

[madoar]

Hmmm, the navigation bar is implemented in https://github.com/madoar/angular-archwizard/blob/develop/src/lib/components/wizard-navigation-bar.component.html.

The problem is, that the content of the awWizardStepSymbol component is added to the inside of the circle. I think we will need to change the navigation bar implementation to support this fully.

[Gevko]

Thank you, I've notification on your project so I will get notified when this will be done.

[madoar]

I'll likely take a look at this at the beginning of next week.

There are two ways I see to solve this issue:

• we add a new directive awWizardStepIndicator, which allows defining the whole step indicator (i.e. the circle including its content)
• we copy the stepId from the wizard step to the id field of the corresponding li or a element in the navigation bar. This then allows for the usage of the id when specifying custom css for the navigation bar

I'm currently more in favor of the second option, @earshinov what do you think?

[Gevko]

Well, the second option seems better for me.

Also, your wizard is very cool and very responsive.

Thank you for your patience and your responses.

[Gevko]

Hello again, I would like to help you to do this feature request, can you please give me some help to know where I should do the needed changes and add new functions? Thank you.

[madoar]

Sorry, I forgot about this issue. If you want to give this a try:

Basically you would only need to modify the wizard-navigation-bar.component.html file and add an [id]="step.stepId" to either the li element or the a element. In addition we require some tests, which ensure that this enhancement works:

• one test which shows that the id is correctly applied when stepId is set for a WizardStep and
• one test which shows that the id is not applied when stepId is not set for a WizardStep

[NA-Jalilius]

Hello @Gevko , @madoar ,
I'm interested in how you @Gevko did succeed to change the color of the horizontal line linking/between two visited steps like int the picture below based on what you were asking for. Because whenever I try to play with the CSS I finish by styling the whole line, not only the part of the visited steps :/
Thank you guys in advance for your help =)