{"id":14973569,"url":"https://github.com/madoar/angular-archwizard","last_synced_at":"2025-05-16T11:04:50.927Z","repository":{"id":17475958,"uuid":"77641192","full_name":"madoar/angular-archwizard","owner":"madoar","description":"A wizard component for Angular 9+","archived":false,"fork":false,"pushed_at":"2023-01-06T12:22:19.000Z","size":3894,"stargazers_count":299,"open_issues_count":54,"forks_count":112,"subscribers_count":9,"default_branch":"develop","last_synced_at":"2025-05-09T06:51:41.113Z","etag":null,"topics":["angular10","angular10-component","angular10-wizard","angular11","angular11-component","angular11-wizard","angular9","angular9-component","angular9-wizard","form-wizard","wizard","wizard-component","wizard-steps"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/madoar.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-12-29T21:33:57.000Z","updated_at":"2025-04-09T13:33:01.000Z","dependencies_parsed_at":"2023-01-13T19:20:59.112Z","dependency_job_id":null,"html_url":"https://github.com/madoar/angular-archwizard","commit_stats":null,"previous_names":["madoar/ng2-archwizard"],"tags_count":22,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/madoar%2Fangular-archwizard","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/madoar%2Fangular-archwizard/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/madoar%2Fangular-archwizard/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/madoar%2Fangular-archwizard/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/madoar","download_url":"https://codeload.github.com/madoar/angular-archwizard/tar.gz/refs/heads/develop","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254518384,"owners_count":22084374,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular10","angular10-component","angular10-wizard","angular11","angular11-component","angular11-wizard","angular9","angular9-component","angular9-wizard","form-wizard","wizard","wizard-component","wizard-steps"],"created_at":"2024-09-24T13:48:58.223Z","updated_at":"2025-05-16T11:04:45.919Z","avatar_url":"https://github.com/madoar.png","language":"TypeScript","readme":"# Overview angular-archwizard\n[![Build Status](https://github.com/madoar/angular-archwizard/actions/workflows/build.yml/badge.svg?branch=develop)](https://github.com/madoar/angular-archwizard/actions)\n[![Dependency Status](https://david-dm.org/madoar/angular-archwizard.svg)](https://david-dm.org/madoar/angular-archwizard)\n[![Dev-Dependency Status](https://david-dm.org/madoar/angular-archwizard/dev-status.svg)](https://david-dm.org/madoar/angular-archwizard?type=dev)\n[![Codacy Badge](https://api.codacy.com/project/badge/Grade/039c5be36d8646dfb73972e8679e5021)](https://www.codacy.com/app/marc.arndt/angular-archwizard?utm_source=github.com\u0026amp;utm_medium=referral\u0026amp;utm_content=madoar/angular-archwizard\u0026amp;utm_campaign=Badge_Grade)\n[![Codacy Badge](https://api.codacy.com/project/badge/Coverage/039c5be36d8646dfb73972e8679e5021)](https://www.codacy.com/app/marc.arndt/angular-archwizard?utm_source=github.com\u0026utm_medium=referral\u0026utm_content=madoar/angular-archwizard\u0026utm_campaign=Badge_Coverage)\n[![NPM Version](https://img.shields.io/npm/v/angular-archwizard.svg)](https://www.npmjs.com/package/angular-archwizard)\n\nThis project contains a functional module with a wizard component and some supportive components and directives for [Angular](https://angular.io/) version 9 or later.\n\n## Build\nRun `npm run build` to build the project. The build artifacts will be stored in the `dist/` directory.\n\n## Running unit tests\nRun `npm test` to execute the unit tests via [Karma](https://karma-runner.github.io).\n\n## Compatibility\nLatest `angular-archwizard` is compatible with Angular 9+.\nOlder versions of `angular-archwizard` can be used together with older versions of Angular.\nThe following table shows which version of `angular-archwizard` has been built with which Angular version:\n\n| `angular-archwizard` version | Angular version |\n|------------------------------|-----------------|\n| `3.0.0`                      | Angular 5       |\n| `4.0.0`                      | Angular 7       |\n| `5.0.1`                      | Angular 8       |\n| `6.1.0`                      | Angular 9       |\n| `7.0.0`                      | Angular 11      |\n\n## Gitpod\n`angular-archwizard` can be developed with Gitpod, a free one-click online IDE for GitHub:\n\n[![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/madoar/angular-archwizard)\n\n## Installation\n\n### Step 1: Install `angular-archwizard`\n`angular-archwizard` is available as a NPM package. To install `angular-archwizard` in your project directory run:\n\n```bash\n$ npm install --save angular-archwizard\n```\n\n### Step 2: Import the ArchwizardModule\nAfter installation you can import `angular-archwizard` into your Angular project by adding the `ArchwizardModule` to your module declaration as follows:\n\n```typescript\nimport { ArchwizardModule } from 'angular-archwizard';\n\n@NgModule({\n  imports: [\n    ArchwizardModule\n  ],\n})\nexport class Module { }\n```\n\n### Step 3: Include styles\nTo allow customization, `angular-archwizard` bundles CSS styles separately. If you are using Angular CLI, import them into your `styles.css`...\n\n```css\n@import '../node_modules/angular-archwizard/styles/archwizard.css';\n```\n\n...or include them into `angular.json`:\n\n```javascript\n{\n  // ...\n  \"styles\": [\n    \"node_modules/angular-archwizard/styles/archwizard.css\",\n    \"src/styles.css\"\n  ]\n  // ...\n}\n```\n\nIf you are using SCSS, you can include the styles in the form of a `.scss` file: `node_modules/angular-archwizard/styles/archwizard.scss`.\nThis way you can easily customize wizard's appearance by tweaking SCSS variables as described in [Styles Customization](#styles-customization).\n\n## How to use the wizard\nTo use this wizard component in an angular project simply add a `aw-wizard` component to the html template of your component:\n\n```html\n\u003caw-wizard\u003e\n  \u003caw-wizard-step stepTitle=\"Title of step 1\"\u003e\n    Content of Step 1\n    \u003cbutton type=\"button\" awNextStep\u003eNext Step\u003c/button\u003e\n    \u003cbutton type=\"button\" [awGoToStep]=\"{stepIndex: 2}\"\u003eGo directly to third Step\u003c/button\u003e\n  \u003c/aw-wizard-step\u003e\n  \u003caw-wizard-step stepTitle=\"Title of step 2\" awOptionalStep\u003e\n    Content of Step 2\n    \u003cbutton type=\"button\" awPreviousStep\u003eGo to previous step\u003c/button\u003e\n    \u003cbutton type=\"button\" awNextStep\u003eGo to next step\u003c/button\u003e\n  \u003c/aw-wizard-step\u003e\n  \u003caw-wizard-step stepTitle=\"Title of step 3\"\u003e\n    Content of Step 3\n    \u003cbutton type=\"button\" awPreviousStep\u003ePrevious Step\u003c/button\u003e\n    \u003cbutton type=\"button\" (click)=\"finishFunction()\"\u003eFinish\u003c/button\u003e\n  \u003c/aw-wizard-step\u003e\n\u003c/aw-wizard\u003e\n```\n\n## Components\n\n### \\\u003caw-wizard\\\u003e\nThe `\u003caw-wizard\u003e` environment is the environment in which you define the steps belonging to your wizard.\nIn addition to the contained wizard steps, `angular-archwizard` enables you to define the location and the layout of the navigation bar inside your wizard.\nTo set the location, the layout of the navigation bar and many other settings, you can pass the following parameters to the `aw-wizard` component:\n\n#### \\[navBarLocation\\]\nThe location of the navigation bar, contained inside the wizard, can be specified through the `navBarLocation` input value.\nThis value can be either `top`, `bottom`, `left` or `right`, where the values specify the position at which the navigation bar will be shown.\nIn addition `top` and `bottom` will lead to a horizontal navigation bar, when `left` and `right` lead to a vertical navigation bar at the\nleft or right side.\nIf no `navBarLocation` is given the navigation bar will be shown at the top of the wizard.\n\n#### \\[navBarLayout\\]\nAnother option that can be changed is the design or layout of the navigation bar.\nCurrently five different navigation bar layouts exist.\nThese are `small`, `large-filled`, `large-empty`, `large-filled-symbols` and `large-empty-symbols`.\n\nThe first three layouts are showing circles with or without a background, for each step of your wizard, in the navigation bar.\nThe second two layouts `large-filled-symbols` and `large-empty-symbols` optionally add a symbol in the center of the circle,\nfor each step of your wizard, in the navigation bar, if such a symbol has been defined for the step.\n\n#### \\[navBarDirection\\]\nNormally the steps in the navigation bar are layed out from left to right or from top to bottom.\nIn some cases, like with languages that are written from right to left, it may be required to change this direction to layout the steps from right to left.\nTo layout the steps from right to left you can pass `right-to-left` to the `navBarDirection` input of the wizard component.\n\n#### \\[defaultStepIndex\\]\nPer default the wizard always starts with the first wizard step, after initialisation. The same applies for a reset, where the wizard normally resets to the first step.\nSometimes this needs to be changed. If another default wizard step needs to be used, you can set it, by using the `[defaultStepIndex]` input of the wizard component.\nFor example, to start the wizard in the second step, `[defaultStepIndex]=\"2\"` needs to be set.\n\nPlease be aware, that angular will interpret the given input value as a string if it's not enclosed by `[]`!\n\n#### \\[disableNavigationBar\\]\nSometimes it may be necessary to disable navigation via the navigation bar.\nIn such a case you can disable navigation via the navigation bar by setting the input `[disableNavigationBar]` of the wizard component to `true`.\n\nAfter disabling the navigation bar, the user can't use the navigation bar anymore to navigate between steps.\nDisabling the navigation bar doesn't restrict the use of elements (buttons or links) with an `awNextStep`, `awPreviousStep` or `awGoToStep` directive.\n\n#### Parameter overview\nPossible `\u003caw-wizard\u003e` parameters:\n\n| Parameter name           | Possible Values                                                                                         | Default Value     |\n| ------------------------ | ------------------------------------------------------------------------------------------------------- | ----------------- |\n| `[navBarLocation]`       | `'top'` \\| `'bottom'` \\| `'left'` \\| `'right'`                                                          | `'top'`           |\n| `[navBarLayout]`         | `'small'` \\| `'large-filled'` \\| `'large-empty'` \\| `'large-filled-symbols'` \\| `'large-empty-symbols'` | `'small'`         |\n| `[navBarDirection]`      | `'left-to-right'` \\| `'right-to-left'`                                                                  | `'left-to-right'` |\n| `[defaultStepIndex]`     | `number`                                                                                                | `0`               |\n| `[disableNavigationBar]` | `boolean`                                                                                               | `false`           |\n\n### \\\u003caw-wizard-step\\\u003e\n`angular-archwizard` contains two ways to define a wizard step.\nOne of these two ways is by using the `\u003caw-wizard-step\u003e` component.\n\n#### \\[stepId\\]\nA wizard step can have its own unique id.\nThis id can then be used to navigate to the step.\nIn addition the `[stepId]` of a wizard step is used as the `id` of the `li` element for the wizard step in the navigation bar.\n\n#### \\[stepTitle\\]\nA wizard step needs to contain a title, which is shown in the navigation bar of the wizard.\nTo set the title of a step, add the `stepTitle` input attribute, with the choosen step title, to the definition of your wizard step.\n\n#### \\[navigationSymbol\\]\nSometimes it's useful to add a symbol in the center of the circle in the navigation bar, which belongs to the step.\n`angular-archwizard` supports this through the `[navigationSymbol]` input attribute of the wizard step.\n\nBe aware, that not all layouts display the symbols.\nOnly the layouts `large-filled-symbols` and `large-empty-symbols` display the symbols!\n\nIf you want to add a `2` to the circle in the navigation bar belonging to the second step, you can do it like this:\n\n```html\n\u003caw-wizard-step stepTitle=\"Second Step\" [navigationSymbol]=\"{ symbol: '2' }\"\u003e\n  ...\n\u003c/aw-wizard-step\u003e\n```\n\nIn addition to normal symbols it's also possible to use an icon from a font as a symbol.\nTo use an icon from a font you need to first search for the unicode belonging to the icon you want to insert.\nAfterwards you can use the unicode in the [numeric character reference](https://en.wikipedia.org/wiki/List_of_XML_and_HTML_character_entity_references)\nformat as the symbol for the step.\nIn addition you need to specify the font family, to which the icon belongs, otherwise the symbol can't be displayed correctly.\n\nThe font family of the used symbol can be specified via the `fontFamily` field of the given `[navigationSymbol]` json input object.\nFor example, if you want to show the icon with the unicode `\\f2dd` of [FontAwesome](http://fontawesome.io/) inside a step circle in the navigation bar, then\nyou can do this via the following `[navigationSymbol]` input attribute:\n\n```html\n\u003caw-wizard-step stepTitle=\"Second Step\" [navigationSymbol]=\"{ symbol: '\u0026#xf2dd;', fontFamily: 'FontAwesome' }\"\u003e\n  ...\n\u003c/aw-wizard-step\u003e\n```\n\n#### \\[canEnter\\]\nSometimes it's required to only allow the user to enter a specific step if a certain validation method returns true.\nIn such a case you can use the `[canEnter]` input of the targeted wizard step.\nThis input can be either a boolean, which directly tells the wizard if the targeted step can be entered,\nor a lambda function, taking a `MovingDirection` and returning a `boolean` or a `Promise\u003cboolean\u003e`.\nThis function will then be called, with the direction in which the targeted step will be entered, whenever an operation has been performed, that leads to a change of the current step.\nIt then returns true, when the step change should succeed and false otherwise.\n\n#### \\[canExit\\]\nIf you have an additional check or validation you need to perform to decide, if the step can be exited (both to the next step and to the previous step),\nyou can either pass a boolean or a function, taking a `MovingDirection` enum and returning a boolean or a `Promise\u003cboolean\u003e`, to the `[canExit]` attribute of the wizard step.\nThis boolean, or function, is taken into account, when an operation has been performed, which leads to a transition of the current step.\nIf `[canExit]` has been bound to a boolean, it needs to be true to leave the step in either direction (foreward AND backward).\nIf only exiting in one direction should be covered, you can pass a function, taking a `MovingDirection` and returning a boolean, to `[canExit]`.\nThis function will then be called whenever an operation has been performed, that leads to a change of the current step.\n\n#### \\(stepEnter\\)\nIf 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:\n\n```html\n\u003caw-wizard-step stepTitle=\"Second Step\" (stepEnter)=\"enterSecondStep($event)\"\u003e\n  ...\n\u003c/aw-wizard-step\u003e\n```\n\nThis leads to the calling of the `enterSecondStep` function when the wizard moves to this step.\nWhen the first step of the wizard contains a `stepEnter` function, it not only gets called\nwhen the user moves back from a later step to the first step, but also after the wizard is initialized.\nThe event emitter will call the given function with a parameter that contains the `MovingDirection` of the user.\nIf the user went backwards, for example from the third step to the second or first step, then `MovingDirection.Backwards` will be passed to the function.\nIf the user went forwards `MovingDirection.Forwards` will be passed to the function.\n\n#### \\(stepExit\\)\nSimilar to `stepEnter` 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\neither by pressing on a component with an `awNextStep` or `awPreviousStep` directive, or by a click on the navigation bar.\n`stepExit`, like `stepEnter` can call the given function with an argument of type `MovingDirection` that signalises in which direction the step was exited.\n\n#### Parameter overview\nPossible `\u003caw-wizard-step\u003e` parameters:\n\n| Parameter name                | Possible Values                                                                                      | Default Value  |\n| ----------------------------- | ---------------------------------------------------------------------------------------------------- | -------------- |\n| `[stepId]`                    | `string`                                                                                             | `null`         |\n| `[stepTitle]`                 | `string`                                                                                             | `null`         |\n| `[navigationSymbol]`          | `{symbol: string, fontFamily?: string}`                                                              | `{symbol: ''}` |\n| `[canEnter]`                  | `function(MovingDirection): boolean` \\| `function(MovingDirection): Promise\u003cboolean\u003e` \\| `boolean`   | `true`         |\n| `[canExit]`                   | `function(MovingDirection): boolean` \\| `function(MovingDirection): Promise\u003cboolean\u003e` \\| `boolean`   | `true`         |\n| `(stepEnter)`                 | `function(MovingDirection): void`                                                                    | `null`         |\n| `(stepExit)`                  | `function(MovingDirection): void`                                                                    | `null`         |\n\n### \\\u003caw-wizard-completion-step\\\u003e\nIn addition to the \"normal\" step component `\u003caw-wizard-step\u003e` it's also possible to define an optional `\u003caw-wizard-completion-step\u003e`.\nThe `aw-wizard-completion-step` is meant as the final wizard step, which signalises the user, that he or she successfully completed the wizard.\nWhen an `aw-wizard-completion-step` has been entered by the user, all wizard steps, including the optional steps belonging to the wizard, are marked as completed.\nIn addition the user is prevented from leaving the `aw-wizard-completion-step` to another step, once it has been entered.\n\nThe given parameters for the wizard completion step are identical to the normal wizard step.\nThe only difference is, that it isn't possible to pass a `(stepExit)` and `[canExit]` parameter to the `aw-wizard-completion-step`, because it can't be exited.\n\n#### Parameter overview\nPossible `\u003caw-wizard-completion-step\u003e` parameters:\n\n| Parameter name                | Possible Values                                                                                      | Default Value  |\n| ----------------------------- | ---------------------------------------------------------------------------------------------------- | -------------- |\n| `[stepId]`                    | `string`                                                                                             | `null`         |\n| `[stepTitle]`                 | `string`                                                                                             | `null`         |\n| `[navigationSymbol]`          | `{symbol: string, fontFamily?: string}`                                                              | `{symbol: ''}` |\n| `[canEnter]`                  | `function(MovingDirection): boolean` \\| `function(MovingDirection): Promise\u003cboolean\u003e` \\| `boolean`   | `true`         |\n| `(stepEnter)`                 | `function(MovingDirection): void`                                                                    | `null`         |\n\n## Directives\n\n### \\[awNavigationMode\\]\nBy default `angular-archwizard` operates in a \"strict\" navigation mode.\nIt requires users to navigate through the wizard steps in a linear fashion, where they can only enter the next step if all previous steps have been completed and the exit condition of the current step have been fulfilled.\nThe only exception to this rule are optional steps, which a user can skip.\nUsing the navigation bar, the user can navigate back to steps they already visited.\n\nYou can alter this behavior by applying to the `\u003caw-wizard\u003e` element an additional `[awNavigationMode]` directive, which can be used in two ways.\nThe easiest option is to tweak the default navigation mode with `[navigateBackward]` and/or `[navigateForward]` inputs which control the navigation bar and have the following options:\n\n| Parameter name                | Possible Values                                                                                      | Default Value |\n| ----------------------------- | ---------------------------------------------------------------------------------------------------- | ------------- |\n| `[navigateBackward]`          | `'allow'` \\| `'deny'`                                                                                | `'allow'`     |\n| `[navigateForward]`           | `'allow'` \\| `'deny'` \\| `'visited'`                                                                 | `'deny'`      |\n\nTake 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:\n\n```html\n\u003caw-wizard [awNavigationMode] navigateBackward=\"allow\" navigateForward=\"allow\"\u003e\n  ...\n\u003c/aw-wizard\u003e\n```\n\nIf 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.\nThis takes priority over `[navigateBackward]` and `[navigateForward]` inputs.\nExample usage:\n\ncustom-navigation-mode.ts:\n\n```typescript\nimport { NavigationMode } from 'angular-archwizard'\n\nclass CustomNavigationMode implements NavigationMode {\n\n  // ...\n}\n```\n\nmy.component.ts:\n\n```typescript\n@Component({\n  // ...\n})\nclass MyComponent {\n\n  navigationMode = new CustomNavigationMode();\n}\n```\n\nmy.component.html:\n\n```html\n\u003caw-wizard [awNavigationMode]=\"navigationMode\"\u003e\n  ...\n\u003c/aw-wizard\u003e\n```\n\nInstead of implementing the `NavigationMode` interface from scratch, you can extend one of the classes provided by `angular-archwizard`:\n\n-   `BaseNavigationMode`: This class contains an abstract method called `isNavigable`, which you will have to override to define wizard's behavior towards navigation using the navigation bar.\n\n-   `ConfigurableNavigationMode`: This class defines the default navigation mode used by `angular-archwizard`. \n    In some cases, it might be more convenient to base your custom implementation on it.\n\nThis way of customizing the wizard is advanced, so be prepared to refer to documentation comments and source code for help.\n\n#### Parameter overview\nPossible `awNavigationMode` parameters:\n\n| Parameter name                | Possible Values                                                                                      | Default Value |\n| ----------------------------- | ---------------------------------------------------------------------------------------------------- | ------------- |\n| `[awNavigationMode]`          | `NavigationMode`                                                                                     | `null`        |\n| `[navigateBackward]`          | `'allow'` \\| `'deny'`                                                                                | `'deny'`      |\n| `[navigateForward]`           | `'allow'` \\| `'deny'` \\| `'visited'`                                                                 | `'allow'`     |\n\n### \\[awEnableBackLinks\\]\nIn some cases it may be required that the user is allowed to leave an entered `aw-wizard-completion-step`.\nIn such a case you can enable this by adding the directive `[awEnableBackLinks]` to the `aw-wizard-completion-step`.\n\n```html\n\u003caw-wizard-completion-step awEnableBackLinks\u003e\n  Final wizard step\n\u003c/aw-wizard-completion-step\u003e\n```\n\n#### Parameter overview\nPossible `awEnableBackLinks` parameters:\n\n| Parameter name                | Possible Values                                                                                      | Default Value |\n| ----------------------------- | ---------------------------------------------------------------------------------------------------- | ------------- |\n| `(stepExit)`                  | `function(MovingDirection): void`                                                                    | `null`        |\n\n### \\[awWizardStepTitle\\]\nSometimes it's not enough to define a title with the `stepTitle` attribute in `\u003caw-wizard-step\u003e` and `\u003caw-wizard-completion-step\u003e`.\nOne example for such a case is, if the title should be written in another font.\nAnother example would be if it's desired that the title should be chosen depending on the available width of your screen or window.\nIn such cases you may want to specify the html for the title of a wizard step yourself.\nThis can be achieved by using the `[awWizardStepTitle]` directive inside a wizard step on a `ng-template` component.\n\n```html\n\u003caw-wizard-step (stepEnter)=\"enterStep($event)\"\u003e\n  \u003cng-template awWizardStepTitle\u003e\n    \u003cspan class=\"hidden-sm-down\"\u003eDelivery address\u003c/span\u003e\n    \u003cspan class=\"hidden-md-up\"\u003eAddress\u003c/span\u003e\n  \u003c/ng-template\u003e\n\u003c/aw-wizard-step\u003e\n```\n\nAdditionally it is possible to inject the corresponding `WizardStep` object into the `ng-template` environment.\nThis for example allows customization of the step title depending on the state of the wizard step, like on the completion and selection state:\n\n```html\n\u003caw-wizard-step (stepEnter)=\"enterStep($event)\"\u003e\n  \u003cng-template awWizardStepTitle let-wizardStep=\"wizardStep\"\u003e\n    {{ wizardStep.completed ? \"Delivery address (✔)\" : \"Delivery address\" }}\n  \u003c/ng-template\u003e\n\u003c/aw-wizard-step\u003e\n```\n\n### \\[awWizardStepSymbol\\]\nIn addition to the step title, the navigation symbol/step symbol can also be set via a directive.\nThis is required, if the navigation step symbol is not a simple character or a symbol, but something more complex, like a html component.\nIn such a case, the the navigation symbol can be specified using the `[awWizardStepSymbol]` directive, inside a wizard step on a `ng-template` component.\n\n```html\n\u003caw-wizard-step (stepEnter)=\"enterStep($event)\"\u003e\n  \u003cng-template awWizardStepSymbol\u003e\n    \u003c!-- use \u003ci class=\"fa fa-file\"\u003e\u003c/i\u003e for fontawesome version 4 --\u003e\n    \u003ci class=\"far fa-file\"\u003e\u003c/i\u003e\n  \u003c/ng-template\u003e\n\u003c/aw-wizard-step\u003e\n```\n\nAdditionally it is possible to inject the corresponding `WizardStep` object into the `ng-template` environment.\nThis for example allows customization of the navigation symbol depending on the state of the wizard step, like on the completion and selection state:\n\n```html\n\u003caw-wizard-step (stepEnter)=\"enterStep($event)\"\u003e\n  \u003cng-template awWizardStepSymbol let-wizardStep=\"wizardStep\"\u003e\n    \u003c!-- use \u003ci *ngIf=\"!wizardStep.completed\" class=\"fa fa-file\"\u003e\u003c/i\u003e for fontawesome version 4 --\u003e\n    \u003ci *ngIf=\"!wizardStep.completed\" class=\"far fa-file\"\u003e\u003c/i\u003e\n    \u003c!-- use \u003ci *ngIf=\"wizardStep.completed\" class=\"fa fa-check\"\u003e\u003c/i\u003e for fontawesome version 4 --\u003e\n    \u003ci *ngIf=\"wizardStep.completed\" class=\"far fa-check\"\u003e\u003c/i\u003e\n  \u003c/ng-template\u003e\n\u003c/aw-wizard-step\u003e\n```\n\n### \\[awOptionalStep\\]\nIf 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\nby adding the `awOptionalStep` directive to the step you want to declare as optional:\n\n```html\n\u003caw-wizard-step awOptionalStep\u003e\n  ...\n\u003c/aw-wizard-step\u003e\n```\n\nSometimes a wizard step should only be marked as optional if some condition has been fulfilled. \nIn such a case you can pass the condition to the `awOptionalStep` input parameter of the `awOptionalStep` directive \nto tell the wizard whether the step should be marked as optional:\n\n```html\n\u003caw-wizard-step [awOptionalStep]=\"condition\"\u003e\n  ...\n\u003c/aw-wizard-step\u003e\n```\n\nIt is important to note that the condition input value can not be changed after initialization.\n\n### \\[awCompletedStep\\]\nIn some cases it is required to specify a step as completed by default.\nThis means that the step should be shown as completed directly after initialization.\nA step can be marked as completed by default by adding the `awCompletedStep` directive to \nthe step you want to declare as completed:\n\n```html\n\u003caw-wizard-step awCompletedStep\u003e\n  ...\n\u003c/aw-wizard-step\u003e\n```\n\nSometimes a wizard step should only be marked as completed if some condition has been fulfilled. \nIn such cases you can pass the condition to the `awCompletedStep` input parameter of the `awCompletedStep` directive\nto tell the wizard, whether the step should be marked as complete:\n\n```html\n\u003caw-wizard-step [awCompletedStep]=\"condition\"\u003e\n  ...\n\u003c/aw-wizard-step\u003e\n```\n\nIt is important to note that the condition input value can not be changed after initialization.\n\n### \\[awSelectedStep\\]\nIn some cases it may be a better choice to set the default wizard step not via a static number.\nAnother way to set the default wizard step is by using the `awSelectedStep` directive.\nWhen attaching the `awSelectedStep` directive to an arbitrary wizard step, it will be marked as the default wizard step,\nwhich is shown directly after the wizard startup.\n\n### \\[awGoToStep\\]\n`angular-archwizard` has three directives, which allow moving between steps.\nThese directives are the `awPreviousStep`, `asNextStep` and `awGoToStep` directives.\n\nThe `awGoToStep` directive needs to receive an input, which tells the wizard, to which step it should navigate,\nwhen the element with the `awGoToStep` directive has been clicked.\n\nThis input accepts different arguments:\n\n-   a destination **step index**:\n    One possible argument for the input is a destination step index.\n    A destination step index is always zero-based, i.e. the index of the first step inside the wizard is always zero.\n\n    To pass a destination step index to an `awGoToStep` directive,\n    you need to pass the following json object to the directive:\n\n    ```html\n    \u003cbutton [awGoToStep]=\"{ stepIndex: 2 }\" (finalize)=\"finalizeStep()\"\u003eGo directly to the third Step\u003c/button\u003e\n    ```\n\n-   a destination **step id**:\n    Another possible argument for the input is a the unique step id of the destination step.\n    This step id can be set for all wizard steps through their input `[stepId]`.\n\n    To pass a unique destination step id to an `awGoToStep` directive,\n    you need to pass the following json object to the directive:\n\n    ```html\n    \u003cbutton [awGoToStep]=\"{ stepId: 'unique id of the third step' }\" (finalize)=\"finalizeStep()\"\u003eGo directly to the third Step\u003c/button\u003e\n    ```\n\n-   a **step offset** between the current step and the destination step:\n    Alternatively to an absolute step index or an unique step id,\n    it's also possible to set the destination wizard step as an offset to the source step:\n\n    ```html\n    \u003cbutton [awGoToStep]=\"{ stepOffset: 1 }\" (finalize)=\"finalizeStep()\"\u003eGo to the third Step\u003c/button\u003e\n    ```\n\nIn all above examples a click on the \"Go to the third Step\" button will move\nthe user to the next step (the third step) compared to the step the button belongs to (the second step).\nIf the button is part of the second step, a click on it will move the user to the third step.\n\nIn all above cases it's important to use `[]` around the `awGoToStep` directive to tell angular that the argument is to be interpreted as javascript.\n\nIn addition to a static value you can also pass a local variable from your component typescript class,\nthat contains to which step a click on the element should change the current step of the wizard.\nThis can be useful if your step transitions depend on some application dependent logic, that changes depending on the user input.\nHere again it's important to use `[]` around the `awGoToStep` directive to tell angular that the argument is to be interpreted as javascript.\n\n#### \\(preFinalize\\)\nSometimes it's required to bind an event emitter to a specific element, which can perform a step transition.\nSuch an event emitter can be bound to the `(preFinalize)` output of the element, which contains the `awGoToStep` directive.\nThis event emitter is then called, directly before the wizard transitions to the given step.\n\n#### \\(postFinalize\\)\nAlternatively you can also bind an event emitter to `(postFinalize)`,\nwhich is executed directly after the wizard transitions to the given step.\n\n#### \\(finalize\\)\nIn case you don't really care when the finalization event emitter is called, you can also bind it simply to `(finalize)`.\n`finalize` is a synonym for `preFinalize`.\n\n#### Parameter overview\nPossible parameters:\n\n| Parameter name    | Possible Values                                                   | Default Value |\n| ----------------- | ----------------------------------------------------------------- | ------------- |\n| `[goToStep]`      | `WizardStep` \\| `StepOffset` \\| `StepIndex` \\| `StepId`           | `null`        |\n| `(preFinalize)`   | `function(): void`                                                | `null`        |\n| `(postFinalize)`  | `function(): void`                                                | `null`        |\n| `(finalize)`      | `function(): void`                                                | `null`        |\n\n### \\[awNextStep\\]\nBy adding a `awNextStep` 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.\nThis listener will automatically change the currently selected wizard step to the next wizard step after a click on the component.\n\n```html\n\u003cbutton (finalize)=\"finalizeStep()\" awNextStep\u003eNext Step\u003c/button\u003e\n```\n\n#### \\(finalize\\)\nLike the `awGoToStep` directive the `awNextStep` directive provides a `preFinalize`, `postFinalize` and `finalize` output, which are called every time\nthe current step is successfully exited, by clicking on the element containing the `nextStep` directive.\n\nIn the given code snipped above, a click on the button with the text `Next Step` leads to a call of the `finalize` function every time the button has been pressed.\n\n#### Parameter overview\nPossible parameters:\n\n| Parameter name    | Possible Values                                                   | Default Value |\n| ----------------- | ----------------------------------------------------------------- | ------------- |\n| `(preFinalize)`   | `function(): void`                                                | `null`        |\n| `(postFinalize)`  | `function(): void`                                                | `null`        |\n| `(finalize)`      | `function(): void`                                                | `null`        |\n\n### \\[awPreviousStep\\]\nBy adding a `awPreviousStep` 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.\nThis listener will automatically change the currently selected wizard step to the previous wizard step after a click on the component.\n\n```html\n\u003cbutton (finalize)=\"finalizeStep()\" awPreviousStep\u003ePrevious Step\u003c/button\u003e\n```\n\n#### \\(finalize\\)\nLike both the `awGoToStep` and `awNextStep` directives the `awPreviousStep` directives provides a `preFinalize`, `postFinalize` and `finalize` output, which are called every time\nthe current step is successfully exited, by clicking on the element containing the `awPreviousStep` directive.\n\n#### Parameter overview\nPossible parameters:\n\n| Parameter name    | Possible Values                                                   | Default Value |\n| ----------------- | ----------------------------------------------------------------- | ------------- |\n| `(preFinalize)`   | `function(): void`                                                | `null`        |\n| `(postFinalize)`  | `function(): void`                                                | `null`        |\n| `(finalize)`      | `function(): void`                                                | `null`        |\n\n### \\[awWizardStep\\]\nIn some cases it may be a good idea to move a wizard step to a custom component.\nThis can be done by defining adding the `awWizardStep` directive to the component that contains the wizard step.\n\n```html\n\u003caw-wizard\u003e\n  \u003caw-wizard-step stepTitle=\"Steptitle 1\"\u003e\n    Step 1\n  \u003c/aw-wizard-step\u003e\n  \u003ccustom-step awWizardStep stepTitle=\"Steptitle 2\"\u003e\n    ...\n  \u003c/custom-step\u003e\n  \u003caw-wizard-step stepTitle=\"Steptitle 3\"\u003e\n    Step 3\n  \u003c/aw-wizard-step\u003e\n\u003c/aw-wizard\u003e\n```\n\n#### Parameter overview\nPossible `awWizardStep` parameters:\n\n| Parameter name                | Possible Values                                                                                      | Default Value  |\n| ----------------------------- | ---------------------------------------------------------------------------------------------------- | -------------- |\n| `[stepId]`                    | `string`                                                                                             | `null`         |\n| `[stepTitle]`                 | `string`                                                                                             | `null`         |\n| `[navigationSymbol]`          | `{symbol: string, fontFamily?: string}`                                                              | `{symbol: ''}` |\n| `[canEnter]`                  | `function(MovingDirection): boolean` \\| `function(MovingDirection): Promise\u003cboolean\u003e` \\| `boolean`   | `true`         |\n| `[canExit]`                   | `function(MovingDirection): boolean` \\| `function(MovingDirection): Promise\u003cboolean\u003e` \\| `boolean`   | `true`         |\n| `(stepEnter)`                 | `function(MovingDirection): void`                                                                    | `null`         |\n| `(stepExit)`                  | `function(MovingDirection): void`                                                                    | `null`         |\n\n### \\[awWizardCompletionStep\\]\nIn addition to the possibility of defining a normal wizard step in a custom component,\nit is also possible to define a wizard completion step in a custom component.\nTo define a wizard completion step in a custom component you need to add the `[awWizardCompletionStep]` directive to the custom component\nthat contains the wizard completion step.\n\n```html\n\u003caw-wizard\u003e\n  \u003caw-wizard-step stepTitle=\"Steptitle 1\"\u003e\n    Step 1\n  \u003c/aw-wizard-step\u003e\n  \u003ccustom-step awWizardCompletionStep stepTitle=\"Completion steptitle\"\u003e\n    ...\n  \u003c/custom-step\u003e\n\u003c/aw-wizard\u003e\n```\n\n#### Parameter overview\nPossible `awWizardCompletionStep` parameters:\n\n| Parameter name                | Possible Values                                                                                      | Default Value  |\n| ----------------------------- | ---------------------------------------------------------------------------------------------------- | -------------- |\n| `[stepId]`                    | `string`                                                                                             | `null`         |\n| `[stepTitle]`                 | `string`                                                                                             | `null`         |\n| `[navigationSymbol]`          | `{symbol: string, fontFamily?: string}`                                                              | `{symbol: ''}` |\n| `[canEnter]`                  | `function(MovingDirection): boolean` \\| `function(MovingDirection): Promise\u003cboolean\u003e` \\| `boolean`   | `true`         |\n| `(stepEnter)`                 | `function(MovingDirection): void`                                                                    | `null`         |\n\n### \\[awResetWizard\\]\nSometimes it's also required to reset the wizard to its initial state.\nIn such a case you can use the `awResetWizard` directive.\nThis directive can be added to a button or a link for example.\nWhen clicking on this element, the wizard will automatically reset to its `defaultStepIndex`.\n\nIn addition it's possible to define an `EventEmitter`, that is called when the wizard is being reset.\nThis `EventEmitter` can be bound to the `(finalize)` input of the `awResetWizard` directive.\n\n#### Parameter overview\nPossible `awResetWizard` parameters:\n\n| Parameter name                | Possible Values                                                                                      | Default Value |\n| ----------------------------- | ---------------------------------------------------------------------------------------------------- | ------------- |\n| `(finalize)`                  | `function(): void`                                                                                   | `null`        |\n\n### Accessing the wizard component instance\nSometimes it's required to access the wizard component directly.\nIn such a case you can get the instance of the used wizard component in your own component via:\n\n```typescript\n@ViewChild(WizardComponent)\npublic wizard: WizardComponent;\n```\n\n### Navigating the wizard programmatically\n\nIn addition to letting the user navigate the wizard with `awNextStep`, `awPreviousStep` and `awGoToStep` directives,\nyou can trigger navigation programmatically.  Use navigation methods exposed by the `WizardComponent` class:\n\n```typescript\nwizard.goToNextStep();\nwizard.goToPreviousStep();\nwizard.goToStep(desinationIndex);\n```\n\n### Customizing the wizard stylesheets\nSometimes you like to use your own custom CSS for some parts of the wizard like its navigation bar.\nThis is quite easy to do.\nDifferent ways are possible:\n\n1.  Either use a wrapper around the wizard:\n    ```html\n    \u003cdiv class=\"my-custom-css-wrapper\"\u003e\n      \u003caw-wizard\u003e\n        ...\n      \u003c/aw-wizard\u003e\n    \u003c/div\u003e\n    ```\n\n2.  Or add your css wrapper class directly to the wizard element:\n    ```html\n    \u003caw-wizard class=\"my-custom-css-wrapper\"\u003e\n      ...\n    \u003c/aw-wizard\u003e\n    ```\n\nWhen overriding css properties already defined in the existing navigation bar layouts, it is required to use `!important`.\nIn addition it is required to add `encapsulation: ViewEncapsulation.None` to the component, that defines the wizard and overrides its layout.\nFor additional information about how to write your own navigation bar please take a look at the existing navigation bar layouts, which can be found in the [archwizard.scss](styles/archwizard.scss) file.\n\n### Working with dynamically inserted and removed steps\nIn some cases it may be required to remove or insert one or multiple steps after the wizard initialization.\nFor example after a user does some interaction with the wizard, it may be required to add or remove a later step.\nIn such situations the wizard supports the removal and insertion of steps in the DOM.\n\nIf an earlier step, compared to the current step, has been removed or inserted, the wizard will adjust the current step to ensure that the changed state is valid again.\n\nWhen removing a step be sure to not remove the step the wizard is currently displaying, because otherwise the wizard will be inside an invalid state, which may lead to strange and unexpected behavior.\n\n## Styles Customization\n\nIf you are using SCSS, you can customize the wizard's global styles and color theme using SCSS variables:\n\n1.  Import `node_modules/angular-archwizard/styles/archwizard.scss` into your `styles.scss` file as described in the [Installation](#installation) section.\n\n2.  Re-define any of the variables you can find at the top of `node_modules/angular-archwizard/styles/variables.scss`.\n\nIn the following example, we configure a simple color theme which only defines styles for two step states: 'default' and 'current'.\n\n```scss\n// styles.scss\n\n$aw-colors: (\n  '_': (\n    'default': (\n      'border-color-default': #76b900,\n      'background-color-default': null,\n      'symbol-color-default': #68aa20,\n      'border-color-hover': #569700,\n      'background-color-hover': null,\n      'symbol-color-hover': #569700,\n    ),\n    'current': (\n      'border-color-default': #bbdc80,\n      'background-color-default': #bbdc80,\n      'symbol-color-default': #808080,\n      'border-color-hover': #76b900,\n      'background-color-hover': #76b900,\n      'symbol-color-hover': #808080,\n    )\n  )\n);\n\n@import '../node_modules/angular-archwizard/styles/archwizard.scss';\n```\n\nPlease don't hesitate to look inside `node_modules/angular-archwizard/styles/variables.scss` for documentation\non the `$aw-colors` variable and other variables you can tweak to tune the wizard to your needs.\n\n## Example\nYou can find an basic example project using `angular-archwizard` [here](https://madoar.github.io/angular-archwizard-demo).\nThe sources for the example can be found in the [angular-archwizard-demo](https://github.com/madoar/angular-archwizard-demo) repository.\nIt illustrates how the wizard looks like and how the different settings can change its layout and behavior.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmadoar%2Fangular-archwizard","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmadoar%2Fangular-archwizard","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmadoar%2Fangular-archwizard/lists"}