{"_id":"@amanuppalhp/ng-wizard","name":"@amanuppalhp/ng-wizard","dist-tags":{"latest":"19.0.0"},"versions":{"19.0.0":{"name":"@amanuppalhp/ng-wizard","description":"Angular ng-wizard - Angular wizard | stepper","version":"19.0.0","repository":{"type":"git","url":"git+https://github.com/amanuppalhp/ng-wizard.git"},"bugs":{"url":"https://github.com/amanuppalhp/ng-wizard/issues"},"author":{"name":"Abdulkadir Genç","email":"gencakadir@gmail.com"},"homepage":"https://github.com/amanuppalhp/ng-wizard","license":"MIT","private":false,"peerDependencies":{"@angular/common":"^19.0.0","@angular/core":"^19.0.0"},"dependencies":{"tslib":"^2.3.0"},"sideEffects":false,"keywords":["angular","wizard","stepper","ng-wizard","wizard-component","stepper-component","step-wizard","bootstrap"],"module":"fesm2022/ng-wizard.mjs","typings":"index.d.ts","exports":{"./package.json":{"default":"./package.json"},".":{"types":"./index.d.ts","default":"./fesm2022/ng-wizard.mjs"}},"_id":"@amanuppalhp/ng-wizard@19.0.0","gitHead":"29a8adf8f66eb66483bad60f6b068f13ee6e0c9c","_nodeVersion":"20.19.0","_npmVersion":"10.8.2","dist":{"integrity":"sha512-41WINVZ27e0bzGYhpN+qg5tQwms79he8Qh2q677Mu0xlrp/NgMPXkp4DI/QPQ93UnO7c094cnGOVTf73bBLX8w==","shasum":"bf43fc9612da05584d943d0cdd9bb87f3ab8c54b","tarball":"https://registry.npmjs.org/@amanuppalhp/ng-wizard/-/ng-wizard-19.0.0.tgz","fileCount":17,"unpackedSize":112587,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQCKawE90+17fX49suYmdsU7ZGuks+W0x4mThGqsMJTiWgIhAMUwmZJ0LdIEGIb2OigmHap6gwEd5Ss3lkJ+2abfJqe0"}]},"_npmUser":{"name":"amanuppalhp","email":"amanuppalhp@gmail.com"},"directories":{},"maintainers":[{"name":"amanuppalhp","email":"amanuppalhp@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/ng-wizard_19.0.0_1748495877010_0.15190148513567991"},"_hasShrinkwrap":false}},"time":{"created":"2025-05-29T05:17:56.932Z","19.0.0":"2025-05-29T05:17:57.185Z","modified":"2025-05-29T05:17:57.423Z"},"maintainers":[{"name":"amanuppalhp","email":"amanuppalhp@gmail.com"}],"description":"Angular ng-wizard - Angular wizard | stepper","homepage":"https://github.com/amanuppalhp/ng-wizard","keywords":["angular","wizard","stepper","ng-wizard","wizard-component","stepper-component","step-wizard","bootstrap"],"repository":{"type":"git","url":"git+https://github.com/amanuppalhp/ng-wizard.git"},"author":{"name":"Abdulkadir Genç","email":"gencakadir@gmail.com"},"bugs":{"url":"https://github.com/amanuppalhp/ng-wizard/issues"},"license":"MIT","readme":"# ng-wizard\n\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\n\n\n\n\n\n\n\n## Dependencies\n\n- [Bootstrap 4](https://getbootstrap.com/docs/4.3/getting-started/download/)\n\n## Getting started\n\nInstall **ng-wizard** through npm:\n\n```\n$ npm install --save ng-wizard\n```\n\nInclude **bootstrap** CSS file (skip if already imported):\n\n```css\n@import \"~bootstrap/dist/css/bootstrap.min.css\";\n```\n\nInclude **ng-wizard** CSS files:\n\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\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: [NgWizardModule.forRoot(ngWizardConfig)],\n})\nexport class AppModule {}\n```\n\nAdd an **ng-wizard** component to the html template of your component:\n\n```html\n\n \n Step 1 content\n \n\n \n Step 2 content\n \n\n \n Step 3 content\n \n\n \n Step 4 content\n \n\n \n Step 5 content\n \n\n \n Step 6 content\n \n\n \n Step 7 content\n \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\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 {\n text: \"Finish\",\n class: \"btn btn-info\",\n event: () => {\n alert(\"Finished!!!\");\n },\n },\n ],\n },\n };\n\n constructor(private ngWizardService: NgWizardService) {}\n\n ngOnInit() {}\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## Configuration\n\n### `NgWizardStep` parameters:\n\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) => boolean \\| Observable)` | | Validation for transition from step |\n| canEnter | `boolean \\| ((args: StepValidationArgs) => boolean \\| Observable)` | | 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\n\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\n[MIT License](https://github.com/abdulkadirgenc/ng-wizard/blob/master/LICENSE)\n","readmeFilename":"README.md","_rev":"1-c8c0e63b3b9fafdef64b937b84c81892"}