Ng Wizard

screenshot of Ng Wizard

A simple wizard/stepper component for Angular 7 utilizing Angular Routing for navigation.

Overview

NgWizard is a straightforward wizard or stepper component specifically designed for Angular 9, leveraging Angular Routing for seamless navigation. This component simplifies the process of creating user-friendly wizards in your Angular applications, making it perfect for scenarios that require multi-step processes. Whether you're setting up forms or multi-step configurations, NgWizard provides a structured way to guide users through their experience.

With its ease of installation and flexibility, NgWizard is suitable for developers looking to enhance their Angular applications. The component supports various customization options and themes, allowing developers to tailor wizards to match their application's aesthetics while ensuring a smooth user experience.

Features

  • Easy Installation: Install NgWizard via NPM and include it in your Angular module with minimal configuration.
  • Routing Integration: Utilizes Angular Routing to manage navigation effortlessly, enabling users to traverse through wizard steps seamlessly.
  • Customizable Options: Pass custom options to the NgWizard component through the data attribute, allowing for unique configurations for each wizard.
  • Step Validation: Implement validation logic in each step using the wsIsValid method to control navigation based on user input.
  • Hooks for State Management: Utilize wsOnNext and wsOnPrevious hooks to handle state saving or logic execution when navigating between steps.
  • Dynamic Access Control: Control access to different steps via URL and handle redirections based on user permissions within the ngOnInit method.
  • Theming Flexibility: Choose from built-in themes or create custom styles to match your application's design, facilitating a cohesive user experience.
typescript
Typescript

TypeScript is a superset of JavaScript, providing optional static typing, classes, interfaces, and other features that help developers write more maintainable and scalable code. TypeScript's static typing system can catch errors at compile-time, making it easier to build and maintain large applications.