8
8
[ ![ Test Coverage] ( https://codeclimate.com/github/madoar/ng2-archwizard/badges/coverage.svg )] ( https://codeclimate.com/github/madoar/ng2-archwizard/coverage )
9
9
[ ![ NPM Version] ( https://img.shields.io/npm/v/ng2-archwizard.svg )] ( https://www.npmjs.com/package/ng2-archwizard )
10
10
11
- This project contains a functional wizard component for [ Angular 2] ( https://angular.io/ ) .
11
+ This project contains a functional wizard component for [ Angular 2 and 4 ] ( https://angular.io/ ) .
12
12
13
13
## Build
14
14
@@ -20,7 +20,7 @@ Run `npm test` to execute the unit tests via [Karma](https://karma-runner.github
20
20
21
21
## Installation
22
22
23
- Ng2 -archwizard is available as an NPM package. To install ng2-archwizard in your project directory run:
23
+ ` ng2 -archwizard` is available as an NPM package. To install ng2-archwizard in your project directory run:
24
24
```
25
25
$ npm install --save ng2-archwizard
26
26
```
@@ -189,6 +189,24 @@ Possible `<wizard-completion-step>` parameters:
189
189
| [ navigationSymbolFontFamily] | string | null |
190
190
| (stepEnter) | function(MovingDirection) | null |
191
191
192
+ ### \[ enableBackLinks\]
193
+ In some cases it may be required that the user is able to leave an entered ` wizard-completion-step ` .
194
+ If this is the case you can enable this by adding the directive ` [enableBackLinks] ` to the ` wizard-completion-step ` .
195
+
196
+ ``` html
197
+ <wizard-completion-step enableBackLinks >
198
+ Final wizard step
199
+ </wizard-completion-step >
200
+ ```
201
+
202
+ #### Parameter overview
203
+ Possible ` [enableBackLinks] ` parameters:
204
+
205
+ | Parameter name | Possible Values | Default Value |
206
+ | ----------------------------- | ------------------------------------------------- | ------------- |
207
+ | (stepExit) | function(MovingDirection) | null |
208
+
209
+
192
210
### \[ wizardStepTitle\]
193
211
Sometimes it's not enough to define a title with the ` title ` attribute in ` <wizard-step> ` and ` <wizard-completion-step> ` .
194
212
One example for such a case is, if the title should be written in another font.
@@ -291,7 +309,62 @@ Possible parameters:
291
309
| ----------------- | ------------------------------------------- | ------------- |
292
310
| (finalize) | function() | null |
293
311
312
+ ### \[ wizardStep\]
313
+ In some cases it may be a good idea to move a wizard step to a custom component.
314
+ This can be done by defining adding the ` [wizardStep] ` directive to the component, that contains the wizard step.
315
+
316
+ ``` html
317
+ <wizard >
318
+ <wizard-step title =" Steptitle 1" >
319
+ Step 1
320
+ </wizard-step >
321
+ <custom-step wizardStep title =" Steptitle 2" ></custom-step >
322
+ <wizard-step title =" Steptitle 3" >
323
+ Step 3
324
+ </wizard-step >
325
+ </wizard >
326
+ ```
327
+
328
+ #### Parameter overview
329
+ Possible ` [wizardStep] ` parameters:
330
+
331
+ | Parameter name | Possible Values | Default Value |
332
+ | ----------------------------- | ------------------------------------------------- | ------------- |
333
+ | [ title] | string | null |
334
+ | [ navigationSymbol] | string | '' |
335
+ | [ navigationSymbolFontFamily] | string | null |
336
+ | [ canExit] | function(MovingDirection): boolean | ; boolean | true |
337
+ | (stepEnter) | function(MovingDirection) | null |
338
+ | (stepExit) | function(MovingDirection) | null |
339
+
340
+ ### \[ wizardCompletionStep\]
341
+ In addition to the possibility of defining a normal wizard step in a custom component,
342
+ it is also possible to define a wizard completion step in a custom component.
343
+ To define a wizard completion step in a custom component you need to add the ` [wizardCompletionStep] ` directive to the custom component,
344
+ that contains the wizard completion step.
345
+
346
+ ``` html
347
+ <wizard >
348
+ <wizard-step title =" Steptitle 1" >
349
+ Step 1
350
+ </wizard-step >
351
+ <custom-step wizardCompletionStep title =" Completion steptitle" >
352
+ </custom-step >
353
+ </wizard >
354
+ ```
355
+
356
+ #### Parameter overview
357
+ Possible ` [wizardCompletionStep] ` parameters:
358
+
359
+ | Parameter name | Possible Values | Default Value |
360
+ | ----------------------------- | ------------------------------------------------- | ------------- |
361
+ | [ title] | string | null |
362
+ | [ navigationSymbol] | string | '' |
363
+ | [ navigationSymbolFontFamily] | string | null |
364
+ | (stepEnter) | function(MovingDirection) | null |
365
+
366
+
294
367
## Example
295
- You can find an basic example project using ng2-archwizard [ here] ( https://madoar.github.io/ng2-archwizard-demo ) .
368
+ You can find an basic example project using ` ng2-archwizard ` [ here] ( https://madoar.github.io/ng2-archwizard-demo ) .
296
369
The sources for the example can be found in the [ ng2-archwizard-demo] ( https://github.com/madoar/ng2-archwizard-demo ) repository.
297
370
It illustrates how the wizard looks like and how the different settings can change its layout.
0 commit comments