{"id":15024291,"url":"https://github.com/abdulkadirgenc/ng-wizard","last_synced_at":"2025-04-12T21:19:53.535Z","repository":{"id":35028316,"uuid":"196566423","full_name":"abdulkadirgenc/ng-wizard","owner":"abdulkadirgenc","description":"Angular Wizard - Stepper","archived":false,"fork":false,"pushed_at":"2024-11-21T09:48:37.000Z","size":879,"stargazers_count":68,"open_issues_count":52,"forks_count":50,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-04T00:16:46.871Z","etag":null,"topics":["angular","bootstrap","ng-wizard","step-wizard","stepper","stepper-component","wizard","wizard-component"],"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/abdulkadirgenc.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-07-12T11:18:28.000Z","updated_at":"2025-02-25T17:06:42.000Z","dependencies_parsed_at":"2024-06-18T15:29:46.723Z","dependency_job_id":"307bf347-c2c7-47e0-a91f-50a84da5288d","html_url":"https://github.com/abdulkadirgenc/ng-wizard","commit_stats":{"total_commits":100,"total_committers":4,"mean_commits":25.0,"dds":"0.41000000000000003","last_synced_commit":"2bfdb7b43c64287a24460eaf87dd7a3c581e812e"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/abdulkadirgenc%2Fng-wizard","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/abdulkadirgenc%2Fng-wizard/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/abdulkadirgenc%2Fng-wizard/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/abdulkadirgenc%2Fng-wizard/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/abdulkadirgenc","download_url":"https://codeload.github.com/abdulkadirgenc/ng-wizard/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248632139,"owners_count":21136630,"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":["angular","bootstrap","ng-wizard","step-wizard","stepper","stepper-component","wizard","wizard-component"],"created_at":"2024-09-24T20:00:04.820Z","updated_at":"2025-04-12T21:19:53.501Z","avatar_url":"https://github.com/abdulkadirgenc.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ng-wizard\nng-wizard is a stepper / wizard component that you can use in your Angular applications. You can access the sample demo project **[by clicking here](https://ng-wizard.stackblitz.io)**.\n\n## Screenshots\n\n![Default](/Screenshots/1_default.png)\n\n![Arrows](/Screenshots/2_arrows.png)\n\n![Circles](/Screenshots/3_circles.png)\n\n![Dots](/Screenshots/4_dots.png)\n\n## Dependencies\n+ [Bootstrap 4](https://getbootstrap.com/docs/4.3/getting-started/download/)\n\n\n## Getting started\nInstall **ng-wizard** through npm:\n```\n$ npm install --save ng-wizard\n```\n\nInclude **bootstrap** CSS file (skip if already imported):\n```css\n@import '~bootstrap/dist/css/bootstrap.min.css';\n```\n\nInclude **ng-wizard** CSS files:\n```css\n/* Mandatory */\n@import '~ng-wizard/themes/ng_wizard.min.css';\n\n/* Optional */\n/* If a theme other than default is used, the css file for that theme is required. */\n@import '~ng-wizard/themes/ng_wizard_theme_arrows.min.css';\n@import '~ng-wizard/themes/ng_wizard_theme_circles.min.css';\n@import '~ng-wizard/themes/ng_wizard_theme_dots.min.css';\n```\n\nImport the **ng-wizard module** into your apps module:\n```typescript\nimport { NgModule } from '@angular/core';\n\nimport { NgWizardModule, NgWizardConfig, THEME } from 'ng-wizard';\n\nconst ngWizardConfig: NgWizardConfig = {\n  theme: THEME.default\n};\n\n@NgModule({\n  imports: [\n    NgWizardModule.forRoot(ngWizardConfig)\n  ]\n})\nexport class AppModule { }\n```\n\nAdd an **ng-wizard** component to the html template of your component:\n```html\n\u003cng-wizard [config]=\"config\" (stepChanged)=\"stepChanged($event)\"\u003e\n\n  \u003cng-wizard-step [title]=\"'Step 1'\" [description]=\"'Step 1 description'\"\n    [canEnter]=\"isValidTypeBoolean\" [canExit]=\"isValidFunctionReturnsBoolean.bind(this)\"\u003e\n    \u003cspan\u003eStep 1 content\u003c/span\u003e\n  \u003c/ng-wizard-step\u003e\n\n  \u003cng-wizard-step [title]=\"'Step 2'\" [description]=\"'Step 2 description'\" [state]=\"stepStates.disabled\"\u003e\n    \u003cspan\u003eStep 2 content\u003c/span\u003e\n  \u003c/ng-wizard-step\u003e\n\n  \u003cng-wizard-step [title]=\"'Step 3'\" [description]=\"'Step 3 description'\"\n    [canEnter]=\"isValidFunctionReturnsObservable.bind(this)\" [canExit]=\"isValidFunctionReturnsBoolean.bind(this)\"\u003e\n    \u003cspan\u003eStep 3 content\u003c/span\u003e\n  \u003c/ng-wizard-step\u003e\n\n\u003cng-wizard-step [title]=\"'Step 4'\" [description]=\"'Step 4 description'\"\u003e\n    \u003cspan\u003eStep 4 content\u003c/span\u003e\n  \u003c/ng-wizard-step\u003e\n\n  \u003cng-wizard-step [title]=\"'Step 5'\" [description]=\"'Step 5 description'\" [state]=\"stepStates.hidden\"\u003e\n    \u003cspan\u003eStep 5 content\u003c/span\u003e\n  \u003c/ng-wizard-step\u003e\n\n  \u003cng-wizard-step [title]=\"'Step 6'\" [description]=\"'Step 6 description'\" [state]=\"stepStates.error\"\u003e\n    \u003cspan\u003eStep 6 content\u003c/span\u003e\n  \u003c/ng-wizard-step\u003e\n\n  \u003cng-wizard-step [title]=\"'Step 7'\" [description]=\"'Step 7 description'\"\u003e\n    \u003cspan\u003eStep 7 content\u003c/span\u003e\n  \u003c/ng-wizard-step\u003e\n\u003c/ng-wizard\u003e\n```\n\n\n`[config]` is an optional parameter for **ng-wizard** component.\n\nIf you want to override **ng-wizard** default configuration defined in **apps module** for a specific component, define `[config]` parameter in your **\\*\\*\\*.component.ts** file.\n```typescript\nimport { Component, OnInit } from '@angular/core';\nimport { of } from 'rxjs';\nimport { NgWizardConfig, NgWizardService, StepChangedArgs, StepValidationArgs, STEP_STATE, THEME } from 'ng-wizard';\n\n@Component({\n  templateUrl: 'app.component.html'\n})\nexport class AppComponent implements OnInit {\n  stepStates = {\n    normal: STEP_STATE.normal,\n    disabled: STEP_STATE.disabled,\n    error: STEP_STATE.error,\n    hidden: STEP_STATE.hidden\n  };\n\n  config: NgWizardConfig = {\n    selected: 0,\n    theme: THEME.arrows,\n    toolbarSettings: {\n      toolbarExtraButtons: [\n        { text: 'Finish', class: 'btn btn-info', event: () =\u003e { alert(\"Finished!!!\"); } }\n      ],\n    }\n  };\n\n  constructor(private ngWizardService: NgWizardService) {\n  }\n\n  ngOnInit() {\n  }\n\n  showPreviousStep(event?: Event) {\n    this.ngWizardService.previous();\n  }\n\n  showNextStep(event?: Event) {\n    this.ngWizardService.next();\n  }\n\n  resetWizard(event?: Event) {\n    this.ngWizardService.reset();\n  }\n\n  setTheme(theme: THEME) {\n    this.ngWizardService.theme(theme);\n  }\n\n  stepChanged(args: StepChangedArgs) {\n    console.log(args.step);\n  }\n\n  isValidTypeBoolean: boolean = true;\n\n  isValidFunctionReturnsBoolean(args: StepValidationArgs) {\n    return true;\n  }\n\n  isValidFunctionReturnsObservable(args: StepValidationArgs) {\n    return of(true);\n  }\n}\n\n```\n\n## Configuration\n### `NgWizardStep` parameters:\n#### Input parameters:\n\n| Name        | Type                                                                        | Default Value       | Description                                  |\n| ----------- | --------------------------------------------------------------------------- | ------------------- | -------------------------------------------- |\n| title       | `string`                                                                    |                     | Step title                                   |\n| description | `string`                                                                    |                     | Step description                             |\n| state       | `STEP_STATE`                                                                | `STEP_STATE.normal` | Step State (normal, disabled, error, hidden) |\n| component   | `Component`                                                                 |                     | A component can be defined for step content. |\n| canExit     | `boolean \\| ((args: StepValidationArgs) =\u003e boolean \\| Observable\u003cboolean\u003e)` |                     | Validation for transition from step          |\n| canEnter    | `boolean \\| ((args: StepValidationArgs) =\u003e boolean \\| Observable\u003cboolean\u003e)` |                     | Validation for transition to step            |\n\n#### Output parameters:\n\n| Name          | Type           | Default Value | Description                                                                                     |\n| ------------- | -------------- | ------------- | ----------------------------------------------------------------------------------------------- |\n| index         | `number`       |               | Step Index                                                                                      |\n| status        | `STEP_STATUS`  |               | Step Status (untouched, done, active)                                                           |\n| initialStatus | `STEP_STATUS`  |               | Initial Step Status (untouched, done, active)                                                   |\n| initialState  | `STEP_STATE`   |               | Step State (normal, disabled, error, hidden)                                                    |\n| componentRef  | `ComponentRef` |               | If the component input parameter is given, it is used to access the instance of this component. |\n\n### `NgWizardConfig` properties:\n\n| Name            | Type                                 | Default Value                                                                                                                                                                 | Description                                                                  |\n| --------------- | ------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------- |\n| selected        | `number`                             | `0`                                                                                                                                                                           | Initial selected step                                                        |\n| keyNavigation   | `boolean`                            | `true`                                                                                                                                                                        | Enable/Disable keyboard navigation (left and right keys are used if enabled) |\n| cycleSteps      | `boolean`                            | `false`                                                                                                                                                                       | Allows to cycle the navigation of steps                                      |\n| lang            | `{ next: string, previous: string }` | `{ next: 'Next', previous: 'Previous' }`                                                                                                                                      | Language variables for buttons                                               |\n| toolbarSettings | `ToolbarSettings`                    | `{ toolbarPosition: TOOLBAR_POSITION.bottom, toolbarButtonPosition: TOOLBAR_BUTTON_POSITION.end, showNextButton: true, showPreviousButton: true, toolbarExtraButtons: [] }`   | Toolbar settings                                                             |\n| anchorSettings  | `AnchorSettings`                     | `{ anchorClickable: true, enableAllAnchors: false, markDoneStep: true, markAllPreviousStepsAsDone: true, removeDoneStepOnNavigateBack: false, enableAnchorOnDoneStep: true }` | Anchor settings                                                              |\n| theme           | `THEME`                              | `THEME.default`                                                                                                                                                               | Wizard theme (default, arrows, circles, dots)                                |\n\n### `ToolbarSettings` properties:\n\n| Name                  | Type                      | Default Value                 | Description                                                       |\n| --------------------- | ------------------------- | ----------------------------- | ----------------------------------------------------------------- |\n| toolbarPosition       | `TOOLBAR_POSITION`        | `TOOLBAR_POSITION.bottom`     | Toolbar position (none, top, bottom, both)                        |\n| toolbarButtonPosition | `TOOLBAR_BUTTON_POSITION` | `TOOLBAR_BUTTON_POSITION.end` | Toolbar button position (start, end)                              |\n| showNextButton        | `boolean`                 | `true`                        | show/hide Next button                                             |\n| showPreviousButton    | `boolean`                 | `true`                        | show/hide Previous button                                         |\n| toolbarExtraButtons   | `ToolbarButton[]`         | `[]`                          | Extra buttons to show on toolbar, array of input/buttons elements |\n\n### `AnchorSettings` properties:\n\n| Name                         | Type        | Default Value | Description                                                     |\n| ---------------------------- | ----------- | ------------- | --------------------------------------------------------------- |\n| anchorClickable              | `boolean`   | `true`        | Enable/Disable anchor navigation                                |\n| enableAllAnchors             | `boolean`   | `false`       | Activates all anchors clickable all times                       |\n| markDoneStep                 | `boolean`   | `true`        | Add done css                                                    |\n| markAllPreviousStepsAsDone   | `boolean`   | `true`        | When a step selected, all previous steps are marked done        |\n| removeDoneStepOnNavigateBack | `boolean`   | `false`       | While navigate back done step after active step will be cleared |\n| enableAnchorOnDoneStep       | `boolean[]` | `true`        | Enable/Disable the done steps navigation                        |\n\n## Thanks\nThis component was created by rewriting the [jQuery Smart Wizard 4](https://github.com/techlab/SmartWizard) in Angular. Thanks to [TechLaboratory](http://www.techlaboratory.net/) for **.Css** files.\n\n## License\n[MIT License](https://github.com/abdulkadirgenc/ng-wizard/blob/master/LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fabdulkadirgenc%2Fng-wizard","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fabdulkadirgenc%2Fng-wizard","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fabdulkadirgenc%2Fng-wizard/lists"}