You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
@@ -17,15 +17,16 @@ Run `npm test` to execute the unit tests via [Karma](https://karma-runner.github
17
17
18
18
## How to use the wizard
19
19
20
-
To use the this wizard component in an angular 2 project simply add a wizard component as followed to the html template of your component:
20
+
To use the this wizard component in an angular 2 project simply add a wizard component to the html template of your component, like this:
21
21
22
-
```angular2html
22
+
```html
23
23
<wizard>
24
24
<wizard-steptitle="Title of step 1">
25
25
Content of Step 1
26
26
<buttontype="button"nextStep>Next Step</button>
27
+
<buttontype="button"goToStep="2">Go directly to third Step</button>
27
28
</wizard-step>
28
-
<wizard-step title="Title of step 2">
29
+
<wizard-steptitle="Title of step 2"optionalStep>
29
30
Content of Step 2
30
31
<buttontype="button"previousStep>Go to previous step</button>
31
32
<buttontype="button"nextStep>Go to next step</button>
@@ -40,35 +41,63 @@ To use the this wizard component in an angular 2 project simply add a wizard com
40
41
41
42
### <wizard>
42
43
`<wizard>...</wizard>` is the environment, in which you define your wizard.
43
-
This contains all steps that belong to your wizard.
44
+
This environment must contain all steps that make up your wizard.
44
45
45
46
### <wizard-step>
46
47
`<wizard-step>...</wizard-step>` is the wizard step environment.
47
-
Every wizard step must be defined inside its own `<wizard-step></wizard-step>` environment.
48
-
If you need to call a function to do some initializing work before entering a wizard step you can add `stepEnter` to the wizard step environment like this:
48
+
Every step that your wizard contains must be defined inside its own `<wizard-step></wizard-step>` environment.
49
+
A wizard must contain a title, which is shown in the navigation bar of the wizard.
50
+
The title of a step can be set by adding a `title` attribute to the step definition.
If you need to call a function to do some initialisation work before entering a wizard step you can add a `stepEnter` attribute to the wizard step environment like this:
This leads to the calling of the `enterSecondStep` function when the wizard moves to this step.
55
-
When the first step of the wizard contains a `stepEnter` function, it's also called after the wizard was initialized.
59
+
When the first step of the wizard contains a `stepEnter` function, it not only gets called
60
+
when the used moves back from a later step to the first step, but also after the wizard is initialized.
61
+
The event emitter will call the given function with a parameter that contains the `MovingDirection` of the user.
62
+
If the user went backwards, like from the third step to the second or first step, then `MovingDirection.Backwards` will be passed to the function.
63
+
If the user went forwards `MovingDirection.Forwards` will be passed to the function.
64
+
65
+
Similarly you can add a `stepExit` attribute to the wizard step environment, if you want to call a function every time a wizard step is exited
66
+
either by pressing on a component with a `nextStep` or `previousStep` directive, or by a click on the navigation bar.
67
+
`stepExit`, like `stepEnter` can call the given function with an argument of type `MovingDirection` that signalises in which direction the step was exited.
56
68
57
-
Similarly you can add `stepExit` to the wizard step environment if you want to call a function every time a wizard step is exited,
58
-
either by pressing on a component with a `nextStep` or `previousStep` directive or by a click on the navigation bar.
69
+
### [optionalStep]
70
+
If you need to define an optional step, that doesn't need to be done to continue to the next steps, you can define an optional step
71
+
by adding the `optionalStep` directive to the step you want to define as optional.
59
72
60
73
### [nextStep]
61
-
By adding `nextStep` to a button or a link you automatically add a `onClick` listener to the button or link, that leads to the next step.
74
+
By adding a `nextStep`directive to a button or a link inside a step, you automatically add a `onClick` listener to the button or link, that leads to the next step.
62
75
This listener will automatically change the currently selected wizard step to the next wizard step after a click on the component.
63
76
64
-
If you want to call a function only after pressing on a component with a `nextStep` directive you can add the a function to the component declaration of the component tagged with `nextStep` like this:
77
+
If you want to call a function only after pressing on a component with a `nextStep` directive you can add the a function
78
+
to the component declaration of the component tagged with `nextStep` like this:
This leads to a call of the function `finalizeStep`everytime the button is pressed.
84
+
This leads to a call of the function `finalizeStep`every time, the button is pressed.
71
85
72
86
### [previousStep]
73
-
By adding `previousStep` to a button or a link you automatically add a `onClick` listener to the button or link, that leads to the previous step.
87
+
By adding a `previousStep`directive to a button or a link, you automatically add a `onClick` listener to the button or link, that changes your wizard to the previous step.
74
88
This listener will automatically change the currently selected wizard step to the previous wizard step after a click on the component.
89
+
90
+
### [goToStep]
91
+
In addition to the `previousStep` and `nextStep` directives the `goToStep` directive is available to move between steps.
92
+
The `goToStep` directive must receive an argument, that tells the directive to which the button should link:
93
+
94
+
```html
95
+
<buttongoToStep="2"(finalize)="finalizeStep()">Go directly to the third Step</button>
96
+
```
97
+
98
+
In the previous example the button will move the user automatically to the third step, after the user pressed onto it.
99
+
This makes it possible to directly jump to all already completed steps and to the first not completed optional or default (not optional) next step,
100
+
which will set the current as completed and makes it possible to jump over steps defined as optional steps.
101
+
102
+
Like the `nextStep` directive the `goToStep` directive provides a `finalize` output, that will be called every time,
103
+
the current step was successfully left by clicking on the button containg the `goToStep` directive.
it('should show the first step correctly, after first jumping from the first to the third step and then back from the third step to the first step',()=>{
it('should show the second step correctly, after first jumping from the first to the third step and then back from the third step to the second step',()=>{
0 commit comments