Apply the [stepId] field from the WizardSteps at ids in the navigation bar

[madoar]

This PR applies the [stepId] input field of the WizardSteps automatically as the id of the li elements in the navigation bar. This allows the user to change the navigation button style of individual steps.

@Gevko this should fix #183, it would be nice if you could give it a try to see if it works :)

Possible Issues

To set the id of the li elements in the navigation bar I've used [attr.id] instead of [id], because this leads to the removal of the id field in the DOM, when step.stepId``is set to nullorundefined. [id]in comparison seems to always add anidfield to the DOM even if the value is set tonullorundefined`.

As far as I know, it seems to be bad practice to use [attr.id] instead of [id], but it seems to result in the "cleanest" DOM in this case. Maybe someone more knowledgeable about the usage of attributes with Angular 2+ can shed some more light on this. (maybe @earshinov?)

[Gevko]

Will try this now, sorry I was busy last few days

[Gevko]

Well, i have the step, but how can I correctly change the style of the step?
@madoar

[madoar]

In theory it should work with:

aw-wizard-navigation-bar.horizontal ul.steps-indicator li#customStep .step-indicator {
  border-color: violet !important;
  background-color: violet !important;
}

and

<aw-wizard-step stepTitle='Steptitle' [stepId]="customStep">Step 1</aw-wizard-step>

[Gevko]

This doesnt work for me.

I've tried the way you told me, but didnt worked. I've inspected the element and i've done a console.log of all li elements using const a = document.getElementsByTagName('li') and the li items that represent my steps dont have any id.

But if i achange the id manually with: a[72].attributes[1].ownerElement.id = 'customStep';
it works and the li has an id and the color of step is changed:

What I am doing wrong? Sorry for giving you this much work

[madoar]

@Gevko I've just added a new PR to the demo/example repository, see madoar/angular-archwizard-demo#28. Can you give it a try to see if it works for you?

Please be aware that you need to build this PR and install it in the demo project, otherwise the feature won't work.

[Gevko]

Hey,
I've downloaded the demo and the PR (https://github.com/madoar/angular-archwizard-demo/tree/add-custom-step-css-demo). How should I install the PR into the demo? Since I am not able to build the PR using ng build

[madoar]

1. clone both angular-archwizard and angular-archwizard-demo
2. checkout the corresponding branches, i.e.:
   • for angular-archwizard: apply-step-id-in-navigation-bar
   • for angular-archwizard-demo: add-custom-step-css-demo
3. run npm run build in the angular-archwizard folder
4. change "angular-archwizard": "^4.0.0", inside the package.json file inside the angular-archwizard-demo folder to "angular-archwizard": "path/to/angular-archwizard/dist",
5. delete the package-lock.json file inside the angular-archwizard-demo folder (just to be sure)
6. run npm install in the angular-archwizard-demo folder
7. run ng serve in the angular-archwizard-demo folder
8. access localhost:4200