Hide/show an optional step

[asalhani]

@madoar
I need your kind support to show me how I can hide/show an optional step using typescript.
I went through your code, I discovered that there is a [hidden()] function in wizard-step.interface.ts
()
However, it only allow get, therefore, I can't set the step hidden proparty.

thank you

[madoar]

What do you mean by "hide/show"?
The hidden field inside wizard-step.interface.ts is used to mark the current selected step of the wizard and is therefore not exposed to outside components.

[asalhani]

@madoar
what I meant with Hide/show is like the below senario:
Suppose I have a wizard with 5 steps. However, the 3rd step is optional and will be decided dynamically by user selection in step 1.
What I want is: Initially, when the wizard loaded for 1st time, I want to configure wizard such as the 3rd step is hidden. However, when the user select a property in step 1, then the 3rd step should be shown.

I hope my explanation was clear this time

[utf4]

@asalhani Simply put *ngIf on the you want to show/hide based on some user input from step 1.

[madoar]

It should work exactly like @furqanaziz wrote.
You just need to make sure that the user is only able to change the visibility of later steps than the one he is currently inside, otherwise the wizard will have a problem with its current internal state.

[patriceo]

Hi there ! First thanks for this nice component.

I'm trying to implement the same behaviour with steps hidden when not applicable (depending on a REST api call), so I implemented a similar solution using a kind of:

<wizard navBarLayout="large-empty-symbols">
        <wizard-step title="My Step 1" *ngIf="step1Available" navigationSymbolFontFamily="FontAwesome" navigationSymbol="&#xff19d;">
          <div class="wizard-step-container">
           ... children components
          </div>
        </wizard-step>
...
</wizard>

This is working great, except in logs angular is complaining about it:

SimulationWizardComponent.html:13 ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'true'. Current value: 'false'.
    at viewDebugError (core.es5.js:8433) [angular]
    at expressionChangedAfterItHasBeenCheckedError (core.es5.js:8411) [angular]
    at checkBindingNoChanges (core.es5.js:8575) [angular]
    at checkNoChangesNodeInline (core.es5.js:12416) [angular]
    at checkNoChangesNode (core.es5.js:12390) [angular]
    at debugCheckNoChangesNode (core.es5.js:13183) [angular]

I'm not sure where it comes from step1Available is only assigned in a Subscribe() of an observable and not binded to children components.

Any idea ?

Edit: it might be related to this angular/angular#15634

[utf4]

@patriceo Please try putting ? after the *ngIf variable, I am in a hurry and will share the details later:

<wizard navBarLayout="large-empty-symbols">
        <wizard-step title="My Step 1" *ngIf="step1Available?" navigationSymbolFontFamily="FontAwesome" navigationSymbol="&#xff19d;">

[patriceo]

Hi @furqanaziz I managed to fixed it, but my fix is not that simple. I injected the ChangeDetectorRef in my component constructor and I called detach() before manipulating my variables then reattach() / detectChanges() right after.

However I will try your proposal !

[myspivey]

I am having an issue where using *ngIf causes the steps to no longer function and transition between each properly. The second step ends up getting stuck if I hide the first step based off a variable. I noticed in the latest that there is no way to reset or rebuild the wizard programmatically either.

[utf4]

@myspivey do you mind sharing plunker or your code a bit, I thin there might be complex canExit/canEnter on second step possibly. You can hide first step / last step / any step with ngIf.

[myspivey]

Sadly I can not but will try to get something together. Having said that, I do not have any canExit or Enter setup, it is using navigationMode="free" and that is all. It strikes me the issue is that if I hide the step after creation, instead of moving to the next step the component is staying on that first step even though it is no longer technically part of the process.

[asalhani]

Sorry for late follow up. I tried to apply the solution proposed earlier by @furqanaziz and @madoar, however it didn't worked. So what I did is I set the step to be optional then I rendered it inside <div> After that I putted *ngIf on the div. This way I'm controlling the visibility of <div> NOT steps.

Although this is worked for me, I highly encourage @madoar to consider making this as configuration on the step to make our life (dev :) easier.

[madoar]

Ok, it's possible that I now know where the error is located.
The problem could be located in the way the wizard steps are internally managed.
Currently the wizard creates a model object at startup.
This model contains an array representation of the steps instead of the initial QueryList.
I don't think this array is updated automatically by angular, which can result in the problem, that changes to the DOM aren't fully known to the model.

To solve the problem once and for all, it should suffice to add a listener to the QueryList that detects changes inside the list and then automatically updates internal model of the wizard.

[madoar]

@candorthor your question here is a duplicate of #201, right?
Please open a new issue for new questions. This makes it much easier for me to track this.
For an answer to your question please take a look at #201.