{"id":19631645,"url":"https://github.com/seb-oss/ng-wizard","last_synced_at":"2025-04-28T06:33:24.730Z","repository":{"id":36649345,"uuid":"172879731","full_name":"seb-oss/ng-wizard","owner":"seb-oss","description":"Wizard component built for angular 12+","archived":false,"fork":false,"pushed_at":"2023-07-18T20:09:25.000Z","size":11329,"stargazers_count":3,"open_issues_count":27,"forks_count":8,"subscribers_count":12,"default_branch":"master","last_synced_at":"2025-04-05T07:11:16.593Z","etag":null,"topics":["angular","seb","wizard"],"latest_commit_sha":null,"homepage":"https://sebgroup.github.io/ng-wizard/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/seb-oss.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","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-02-27T08:57:33.000Z","updated_at":"2025-02-25T16:56:01.000Z","dependencies_parsed_at":"2024-06-03T15:09:24.916Z","dependency_job_id":"95f22a30-2c75-40bd-8d11-7c6190e25885","html_url":"https://github.com/seb-oss/ng-wizard","commit_stats":null,"previous_names":["seb-oss/ng-wizard"],"tags_count":38,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/seb-oss%2Fng-wizard","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/seb-oss%2Fng-wizard/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/seb-oss%2Fng-wizard/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/seb-oss%2Fng-wizard/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/seb-oss","download_url":"https://codeload.github.com/seb-oss/ng-wizard/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251266060,"owners_count":21561775,"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","seb","wizard"],"created_at":"2024-11-11T12:10:38.676Z","updated_at":"2025-04-28T06:33:24.294Z","avatar_url":"https://github.com/seb-oss.png","language":"TypeScript","readme":"# @sebgroup/ng-wizard\n\n[![CI](https://github.com/sebgroup/ng-wizard/actions/workflows/main.yml/badge.svg?branch=master)](https://github.com/sebgroup/ng-wizard/actions/workflows/main.yml)[![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)\n[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)\n\n\u003cp class=\"lead\"\u003e\n  This is a wizard component built for angular. It uses routes and route guards to control steps and it relies on\n  Bootstrap for markup and styling as well as Font Awesome for icons.\n\u003c/p\u003e\n\u003ch4\u003eRequirements\u003c/h4\u003e\n\u003cul class=\"list-group list-group-check\"\u003e\n  \u003cli class=\"list-group-item\"\u003e\n    \u003cstrong\u003eAngular\u003c/strong\u003e - This component is built for Angular and tested with version 12+.\n  \u003c/li\u003e\n  \u003cli class=\"list-group-item\"\u003e\n    \u003cstrong\u003eA route for each step\u003c/strong\u003e - Each step in the wizard is a route with an optional route guard using\n    \u003ca href=\"https://angular.io/api/router/CanActivate\" class=\"external\" target=\"_blank\"\u003eCanActivate\u003c/a\u003e (for protected\n    steps). Step controls are provided using route data objects.\n  \u003c/li\u003e\n  \u003cli class=\"list-group-item\"\u003e\n    \u003cstrong\u003eBootstrap\u003c/strong\u003e - This component relies on styles provided by SEB:s Bootstrap theme:\n    \u003ca href=\"https://github.com/sebgroup/bootstrap\" class=\"external\" target=\"_blank\"\u003e@sebgroup/bootstrap\u003c/a\u003e.\n  \u003c/li\u003e\n  \u003cli class=\"list-group-item\"\u003e\n    \u003cstrong\u003eFont Awesome\u003c/strong\u003e - This component uses Font Awesome regular icons (dependency might be removed in a\n    future release).\n    \u003cdiv class=\"alert alert-warning alert-icon mt-3 mx-n5 mx-sm-0\"\u003e\n      Note that you need to have a pro license for Font Awesome or use SEB:s internal npm registry to install this\n      package.\n    \u003c/div\u003e\n  \u003c/li\u003e\n\u003c/ul\u003e\n\n## Demo and documentation\n\n[View demo and documentation](https://sebgroup.github.io/ng-wizard/)\n\n## Quick start\n\n### Install\n\n```\nnpm install @sebgroup/ng-wizard\n```\n\n### Import the module.\n\napp.module.ts\n\n```TypeScript\nimport { NgModule } from '@angular/core';\nimport { BrowserModule } from '@angular/platform-browser';\nimport { BrowserAnimationsModule } from '@angular/platform-browser/animations';\nimport { FaIconLibrary, FontAwesomeModule } from '@fortawesome/angular-fontawesome';\nimport { SebNgWizardModule, WizardSteps } from '@sebgroup/ng-wizard';\n\nimport { AppRoutingModule } from './app-routing.module';\nimport { AppComponent } from './app.component';\nimport { StepOneComponent } from './steps/step-one/step-one.component';\nimport { StepTwoComponent } from './steps/step-two/step-two.component';\n\n@NgModule({\n  declarations: [AppComponent, StepOneComponent, StepTwoComponent],\n  imports: [BrowserModule, BrowserAnimationsModule, AppRoutingModule, FontAwesomeModule, SebNgWizardModule.forRoot()],\n  providers: [WizardSteps],\n  bootstrap: [AppComponent],\n})\nexport class AppModule {\n  constructor(library: FaIconLibrary) {\n    // add icons that should be available in the app/module\n  }\n}\n```\n\n### Setup steps as routes\n\napp-routing.module.ts\n\n```TypeScript\nimport { NgModule } from '@angular/core';\nimport { RouterModule } from '@angular/router';\nimport { WizardStep } from '@sebgroup/ng-wizard';\nimport { StepOneComponent } from './steps/step-one/step-one.component';\nimport { StepTwoComponent } from './steps/step-two/step-two.component';\n\nconst routes: WizardStep[] = [\n  {\n    path: '',\n    redirectTo: 'step-one',\n    pathMatch: 'full',\n  },\n  {\n    path: 'step-one',\n    component: StepOneComponent,\n    data: {\n      heading: 'Step one',\n    },\n  },\n  {\n    path: 'step-two',\n    component: StepTwoComponent,\n    data: {\n      heading: 'Step two',\n    }\n  },\n];\n\n@NgModule({\n  imports: [RouterModule.forRoot(routes)],\n  exports: [RouterModule],\n})\nexport class AppRoutingModule {}\n\n```\n\n### Add component\n\napp.component.ts\n\n```Html\n\u003c!-- add wizard component and router outlet --\u003e\n\u003cwiz-wizard\u003e\n  \u003cdiv class=\"wizard-main\"\u003e\n    \u003c!-- this is where your steps will be rendered --\u003e\n    \u003crouter-outlet\u003e\u003c/router-outlet\u003e\n  \u003c/div\u003e\n\u003c/wiz-wizard\u003e\n```\n\nFor more info and examples please see [demo and documentation](https://sebgroup.github.io/ng-wizard/).\n\n## Local development\n\nTo run this project locally first build the library and watch for changes by running:\n\n```\nnpm run build:watch\n```\n\nThen start one of the following demo apps by running either:\n\n```\nnpm start\n```\n\nor\n\n```\nnpm run start:simple\n```\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fseb-oss%2Fng-wizard","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fseb-oss%2Fng-wizard","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fseb-oss%2Fng-wizard/lists"}