Support an initially empty wizard about angular-archwizard HOT 4 CLOSED

The wizard currently doesn't support your approach out of the box.

There are some things you can try to get it working:

• the first problem you're facing is, that your wizard doesn't contain a step during initialization. This can be solved by a *ngIf, which you can add to your wizard, that only adds the wizard to the dom, if it contains at least one step.
• the second problem, I see is, that your approach enables the user to change the contained steps in the wizard while he's using it right?
  This leads to a problem, namely that the user is able to remove an already completed step or adds a step before his currently entered step. This is especially problematic, because the wizard currently does no adjustment to its state, if it detects changes to the contained wizard steps.
  This means, that if you're let's say in step 3 and you remove step 2, the wizard will automatically show you step four, while step 3 hasn't even been completed yet. The current solution to this problem would be to only show the wizard if all steps have been decided, that should be contained in the wizard. Afterwards it should be impossible for the user to add or remove some steps.

If you want to provide a lasting solution for this issue feel free to do so.
For the first problem it would be required to add some checks, that allow empty wizards.
For the second problem we would need an observer for the QueryList<WizardStep> in https://github.com/madoar/ng2-archwizard/blob/master/src/components/wizard.component.ts, that checks for changes inside the list and modifies the underlying model accordingly.

from angular-archwizard.

Hi.. please show some code for first problem. Since i'm using wizard tag in one component and wizard-step in another component and included in first component's html, Its showing same error. It will be a initialization problem. Show me some sample code of *ngIf.

from angular-archwizard.

@vinayistar I imagine something like

<aw-wizard *ngIf="steps.length > 0">
</aw-wizard>

should work.

The above used syntax is for version 3.0.0.

from angular-archwizard.

The second point has been implemented in angular-archwizard. The removal and addition of wizard steps after initialization is (now) possible. When doing this it is important to watch out that only steps after the current step are added and removed, otherwise it is possible that the state of the wizard is broken and the wrong step is shown or the navigation doesn't function correctly anymore.

from angular-archwizard.