Change the step icon's style/innerHtml

[Gevko]

Hello,

Some months ago I had a problem and it was solved here: #186 , by adding a stepId for each wizard's step. I needed to add an error symbol to the wizard's step if the step had any errors, and I was doing it this way:

const stepElmnt = document.getElementById('stepsId');
stepElmnt.innerHtml += 'someHtmlThatWillPutAnErrorIconToStep';

Now i tried again to do the same thing, but I can not get the element by id, since with the latest wizard's version the value of stepElmnt is always undefined. What should I do to reproduce the same thing I did earlier?

Thanks, Gevko.

[madoar]

So basically you want to add a symbol to a step-indicator in the navigation bar? If you can't get the correct element by its id I think you're either trying to access the element before it has been created (wrong angular lifecycle phase) or somehow the element does not exist.

Can you share the created DOM tree for your code or a code-sample that produces the error? (a screenshot from a browser debugger should be ok).

[Gevko]

Hello,

The first print is the wizard instance's log, and the second is the DOM.

As you can see, my first step's stepId is "brigade", and i log it with console.log(document.getElementById('brigade')); and the log is null. Also this can not be angular lifecycle problem, since I log this on a button click long after the wizard is created. But this was working this way at the version you provided me some month ago.

[madoar]

Which version of angular-archwizard are you using?

[Gevko]

4.0.0

[madoar]

This is strange. Can you provide a minimal example leading to this issue?

We have an example for the stepId feature at https://madoar.github.io/angular-archwizard-demo/#/custom-css/step and https://github.com/madoar/angular-archwizard-demo/blob/master/src/app/custom-step-css/custom-step-css.component.html#L13. Does your code differ from this pattern?

[Gevko]

Nope, my code is similar to yours.

<aw-wizard #wizard [navBarLayout]="'large-filled-symbols'" class="custom-css">
<aw-wizard-step stepId="brigade" [stepTitle]="'components.fieldNames.general' | translate" [navigationSymbol]="{symbol: '1'}">
Some content...

at .ts file i have a test method:
test() {
console.log(document.getElementById('brigade'));
}

This always logs me null.

[madoar]

I need a minimal code example that leads to the error, otherwise it is hard for me to help.

[Gevko]

<aw-wizard #wizard [navBarLayout]="'large-filled-symbols'" class="custom-css"> <aw-wizard-step [stepId]="'brigade'" [stepTitle]="'labels.generalFields' | translate" [navigationSymbol]="{symbol: '1'}"> HELLO THIS SHOULD BE WORKING x) </aw-wizard-step> </aw-wizard>

and i have a method on ts file:
test() { console.log(document.getElementById('brigade')); }

this logs me null, is this code enough? :)

[madoar]

No this is only a snippet which misses a lot of information. Please provide a runnable example web-application that demonstrates your error. You can this either in a new Github repository or through a website like stackblitz. Without such an example it is really hard for me to reproduce the issue and thereby to help fix it.

[Gevko]

So here it is:
https://stackblitz.com/edit/angular-pgrkea
the aler always logs null...

[madoar]

After updating the version of angular-archwizard from 3.0.0 to 4.0.0 it was working for me.
I would recommend you update your application all the way to 5.0.0.

[Gevko]

gonna try out :)

[madoar]

I take it as the problem has been solved? If you still face this issue feel free to open a new issue