Skip to content

Commit 9855787

Browse files
madoarmadoar
authored
Fix some Issues in the README file (#271)
- add some newlines for better readability - add some comments to some code snippets for more information
1 parent 6e1fe50 commit 9855787

File tree

1 file changed

+48
-22
lines changed

1 file changed

+48
-22
lines changed

‎README.md‎

Lines changed: 48 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -26,12 +26,14 @@ Latest `angular-archwizard` is compatible with Angular 9+.
2626

2727
### Step 1: Install `angular-archwizard`
2828
`angular-archwizard` is available as a NPM package. To install `angular-archwizard` in your project directory run:
29+
2930
```bash
3031
$ npm install --save angular-archwizard
3132
```
3233

3334
### Step 2: Import the ArchwizardModule
3435
After installation you can import `angular-archwizard` into your Angular project by adding the `ArchwizardModule` to your module declaration as follows:
36+
3537
```typescript
3638
import { ArchwizardModule } from 'angular-archwizard';
3739

@@ -134,13 +136,13 @@ Disabling the navigation bar doesn't restrict the use of elements (buttons or li
134136
#### Parameter overview
135137
Possible `<aw-wizard>` parameters:
136138

137-
| Parameter name | Possible Values | Default Value |
138-
| ---------------------- | ----------------------------------------------------------------------------------------------------- | ------------- |
139-
| [navBarLocation] | `top` \| `bottom` \| `left` \| `right` | top |
140-
| [navBarLayout] | `small` \| `large-filled` \| `large-empty` \| `large-filled-symbols` \| `large-empty-symbols` | small |
141-
| [navBarDirection] | `left-to-right` \| `right-to-left` | left-to-right |
142-
| [defaultStepIndex] | `number` | 0 |
143-
| [disableNavigationBar] | `boolean` | false |
139+
| Parameter name | Possible Values | Default Value |
140+
| ------------------------ | ----------------------------------------------------------------------------------------------------- | ------------- |
141+
| `[navBarLocation]` | `top` \| `bottom` \| `left` \| `right` | top |
142+
| `[navBarLayout]` | `small` \| `large-filled` \| `large-empty` \| `large-filled-symbols` \| `large-empty-symbols` | small |
143+
| `[navBarDirection]` | `left-to-right` \| `right-to-left` | left-to-right |
144+
| `[defaultStepIndex]` | `number` | 0 |
145+
| `[disableNavigationBar]` | `boolean` | false |
144146

145147
### \<aw-wizard-step\>
146148
`angular-archwizard` contains two ways to define a wizard step.
@@ -165,7 +167,9 @@ Only the layouts `large-filled-symbols` and `large-empty-symbols` display the sy
165167
If you want to add a `2` to the circle in the navigation bar belonging to the second step, you can do it like this:
166168

167169
```html
168-
<aw-wizard-step stepTitle="Second Step" [navigationSymbol]="{ symbol: '2' }"></aw-wizard-step>
170+
<aw-wizard-step stepTitle="Second Step" [navigationSymbol]="{ symbol: '2' }">
171+
...
172+
</aw-wizard-step>
169173
```
170174

171175
In addition to normal symbols it's also possible to use an icon from a font as a symbol.
@@ -179,7 +183,9 @@ For example, if you want to show the icon with the unicode `\f2dd` of [FontAweso
179183
you can do this via the following `[navigationSymbol]` input attribute:
180184

181185
```html
182-
<aw-wizard-step stepTitle="Second Step" [navigationSymbol]="{ symbol: '&#xf2dd;', fontFamily: 'FontAwesome' }"></aw-wizard-step>
186+
<aw-wizard-step stepTitle="Second Step" [navigationSymbol]="{ symbol: '&#xf2dd;', fontFamily: 'FontAwesome' }">
187+
...
188+
</aw-wizard-step>
183189
```
184190

185191
#### \[canEnter\]
@@ -202,7 +208,9 @@ This function will then be called whenever an operation has been performed, that
202208
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:
203209

204210
```html
205-
<aw-wizard-step stepTitle="Second Step" (stepEnter)="enterSecondStep($event)"></aw-wizard-step>
211+
<aw-wizard-step stepTitle="Second Step" (stepEnter)="enterSecondStep($event)">
212+
...
213+
</aw-wizard-step>
206214
```
207215

208216
This leads to the calling of the `enterSecondStep` function when the wizard moves to this step.
@@ -263,20 +271,23 @@ The easiest option is to tweak the default navigation mode with `[navigateBackwa
263271

264272
| Parameter name | Possible Values | Default Value |
265273
| ----------------------------- | ---------------------------------------------------------------------------------------------------- | ------------- |
266-
| `[navigateBackward]` | `'allow'` \| `'deny'` | `'deny'` |
267-
| `[navigateForward]` | `'allow'` \| `'deny'` \| `'visited'` | `'allow'` |
274+
| `[navigateBackward]` | `'allow'` \| `'deny'` | `'deny'` |
275+
| `[navigateForward]` | `'allow'` \| `'deny'` \| `'visited'` | `'allow'` |
268276

269277
Take notice that the `'allow'` and `'visited'` options still respect step exit conditions. Also, the completion step still only becomes enterable after all previous steps are completed. Example usage:
270278

271279
```html
272-
<aw-wizard [awNavigationMode] navigateBackward="allow" navigateForward="allow">...</aw-wizard>
280+
<aw-wizard [awNavigationMode] navigateBackward="allow" navigateForward="allow">
281+
...
282+
</aw-wizard>
273283
```
274284

275285
If changes you need are more radical, you can define your own navigation mode. In order to do this, create a class implementing the `NavigationMode` interface and pass an instance of this class into the `[awNavigationMode]` directive.
276286
This takes priority over `[navigateBackward]` and `[navigateForward]` inputs.
277287
Example usage:
278288

279289
custom-navigation-mode.ts:
290+
280291
```typescript
281292
import { NavigationMode } from 'angular-archwizard'
282293

@@ -287,6 +298,7 @@ class CustomNavigationMode implements NavigationMode {
287298
```
288299

289300
my.component.ts:
301+
290302
```typescript
291303
@Component({
292304
// ...
@@ -298,8 +310,11 @@ class MyComponent {
298310
```
299311

300312
my.component.html:
313+
301314
```html
302-
<aw-wizard [awNavigationMode]="navigationMode">...</aw-wizard>
315+
<aw-wizard [awNavigationMode]="navigationMode">
316+
...
317+
</aw-wizard>
303318
```
304319

305320
Instead of implementing the `NavigationMode` interface from scratch, you can extend one of the classes provided by `angular-archwizard`:
@@ -372,6 +387,7 @@ In such a case, the the navigation symbol can be specified using the `[awWizardS
372387
```html
373388
<aw-wizard-step (stepEnter)="enterStep($event)">
374389
<ng-template awWizardStepSymbol>
390+
// use <i class="fa fa-file"></i> for fontawesome version 4
375391
<i class="far fa-file"></i>
376392
</ng-template>
377393
</aw-wizard-step>
@@ -383,7 +399,9 @@ This for example allows customization of the navigation symbol depending on the
383399
```html
384400
<aw-wizard-step (stepEnter)="enterStep($event)">
385401
<ng-template awWizardStepSymbol let-wizardStep="wizardStep">
402+
// use <i *ngIf="!wizardStep.completed" class="fa fa-file"></i> for fontawesome version 4
386403
<i *ngIf="!wizardStep.completed" class="far fa-file"></i>
404+
// use <i *ngIf="wizardStep.completed" class="fa fa-check"></i> for fontawesome version 4
387405
<i *ngIf="wizardStep.completed" class="far fa-check"></i>
388406
</ng-template>
389407
</aw-wizard-step>
@@ -395,7 +413,7 @@ by adding the `awOptionalStep` directive to the step you want to declare as opti
395413

396414
```html
397415
<aw-wizard-step awOptionalStep>
398-
...
416+
...
399417
</aw-wizard-step>
400418
```
401419

@@ -405,7 +423,7 @@ to tell the wizard whether the step should be marked as optional:
405423

406424
```html
407425
<aw-wizard-step [awOptionalStep]="condition">
408-
...
426+
...
409427
</aw-wizard-step>
410428
```
411429

@@ -419,7 +437,7 @@ the step you want to declare as completed:
419437

420438
```html
421439
<aw-wizard-step awCompletedStep>
422-
...
440+
...
423441
</aw-wizard-step>
424442
```
425443

@@ -429,7 +447,7 @@ to tell the wizard, whether the step should be marked as complete:
429447

430448
```html
431449
<aw-wizard-step [awCompletedStep]="condition">
432-
...
450+
...
433451
</aw-wizard-step>
434452
```
435453

@@ -566,7 +584,9 @@ This can be done by defining adding the `awWizardStep` directive to the componen
566584
<aw-wizard-step stepTitle="Steptitle 1">
567585
Step 1
568586
</aw-wizard-step>
569-
<custom-step awWizardStep stepTitle="Steptitle 2"></custom-step>
587+
<custom-step awWizardStep stepTitle="Steptitle 2">
588+
...
589+
</custom-step>
570590
<aw-wizard-step stepTitle="Steptitle 3">
571591
Step 3
572592
</aw-wizard-step>
@@ -598,6 +618,7 @@ that contains the wizard completion step.
598618
Step 1
599619
</aw-wizard-step>
600620
<custom-step awWizardCompletionStep stepTitle="Completion steptitle">
621+
...
601622
</custom-step>
602623
</aw-wizard>
603624
```
@@ -632,6 +653,7 @@ Possible `awResetWizard` parameters:
632653
### Accessing the wizard component instance
633654
Sometimes it's required to access the wizard component directly.
634655
In such a case you can get the instance of the used wizard component in your own component via:
656+
635657
```typescript
636658
@ViewChild(WizardComponent)
637659
public wizard: WizardComponent;
@@ -656,13 +678,17 @@ Different ways are possible:
656678
1. Either use a wrapper around the wizard:
657679
```html
658680
<div class="my-custom-css-wrapper">
659-
<aw-wizard></aw-wizard>
681+
<aw-wizard>
682+
...
683+
</aw-wizard>
660684
</div>
661685
```
662686

663687
2. Or add your css wrapper class directly to the wizard element:
664688
```html
665-
<aw-wizard class="my-custom-css-wrapper"></aw-wizard>
689+
<aw-wizard class="my-custom-css-wrapper">
690+
...
691+
</aw-wizard>
666692
```
667693

668694
When overriding css properties already defined in the existing navigation bar layouts, it is required to use `!important`.
@@ -676,7 +702,7 @@ In some cases it may be required to remove or insert one or multiple steps after
676702
for example after a user does some interaction with the wizard, it may be required to add or remove a later step.
677703
In such situations the wizard supports the removal and insertion of steps in the DOM.
678704

679-
If you require to the dynamic removal or insertion of steps, please be aware that the angular component containing the wizard
705+
If you require the dynamic removal or insertion of steps, please be aware that the angular component containing the wizard
680706
needs to trigger a `detectChanges()` call inside the `afterViewInit` lifecycle phase.
681707
This call can be triggered by adding the following lines to the component class:
682708
```typescript

0 commit comments

Comments
 (0)