New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Apply the [stepId] field from the WizardSteps at ids in the navigation bar #186
Conversation
Will try this now, sorry I was busy last few days |
Well, i have the step, but how can I correctly change the style of the step? |
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 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. |
Hey, |
|
* master: - adjust version - add angular version 7 to the keywords - fix badges in README Update to angular 7 (madoar#194) Update the badges (madoar#193) Cleanup .travis.yml (madoar#191) Remove unnecesarry index.ts files (madoar#192) Apply the [stepId] field from the WizardSteps at ids in the navigation bar (madoar#186) Update the index.ts files (madoar#187) Removing barrel export and explicitly exporting each component in base index.ts. Barrel exports of components cause @ViewChild(<className>) to give undefined in AOT builds (madoar#184) Declare Angular 7 compatibility in `package.json` (madoar#165) Refactor styles (madoar#161) Restore vertical nav bar layout, in particular label alignment (madoar#159)
This PR applies the
[stepId]
input field of theWizardStep
s automatically as theid
of theli
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 theli
elements in the navigation bar I've used[attr.id]
instead of[id]
, because this leads to the removal of theid
field in the DOM, whenstep.stepId``is set to
nullor
undefined.
[id]in comparison seems to always add an
idfield to the DOM even if the value is set to
nullor
undefined`.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?)