Needlessly Postulating Minds

    ng-toolbar-wizard
    TypeScript icon, indicating that this package has built-in type declarations

    1.1.2 • Public • Published

    NgToolbarWizard

    NgToolbarWizard is used to facilitate the creation of wizards, using navigation through the Angular router.

    At the passage of each step, a custom validation of the page is made, and it is possible to perform more actions than the simple passage of steps, using the page data.

    Getting Started

    We take into consideration that the structure is on two levels.

    • The wizard page
      • The sub pages

    In the Wizard page we have to import the NgToolbarWizardModule module. Once this is done, you can use our component.

    <ng-toolbar-wizard 
        [advanceSearchStep]="advanceSearchStep"
        imgPath="assets/icon/Img.svg"
    
        title="Ng-toolbar-wizard"
        textPrev="Previous"
        textNext="Next"
        confirmNext="confirm"
        textCancel="Cancel"
    
        (onCompleteWizardEvent)="completeEvent()"
        (onCancelEvent)="cancelEvent()"
        (onBackEvent)="backEvent()"
        (onValidateEvent)="validateEvent($event)">
    </ng-toolbar-wizard>

    advanceSearchStep is a StepPage [] that defines:

    • the step of the pages;
    • The Path of the component to be loaded;
    • A method to perform additional actions in the next step (optional);
    • A method to perform additional actions on the return of the previous step (optional).
    import { StepPage } from 'node_modules/ng-toolbar-wizard/interface/step-page';
    
    advanceSearchStep: StepPage[] = [
        {
          step: 1,
          pagePath: 'wizard/first-step',
          // eslint-disable-next-line @typescript-eslint/no-unused-vars
          nextStep: (val: any) => {
            console.log('first-step next');
          },
        },
        {
          step: 2,
          pagePath: 'wizard/second-step',
          // eslint-disable-next-line @typescript-eslint/no-unused-vars
          nextStep: (val: any) => {
            console.log('second-step next');
          },
          prevStep: (val: any) => {
            console.log('prev-step next');
          }
        },
      ];

    NextStep and prevStep have as input a parameter which is a custom object deriving from the child pages.

    Child Page

    The child pages must implement ISubPage, an interface exposed by the library which forces to implement two methods:

    • getValue (): method that returns an object of any type which is intercepted by the nextStep and prevStep methods explained above;
    • isValidForm (): method used to validate the page, called upon nextStep click
    import { ISubPage } from 'node_modules/ng-toolbar-wizard/interface/sub-page';
    
    @Component({
      selector: 'app-first-step',
      templateUrl: './first-step.component.html',
      styleUrls: ['./first-step.component.scss']
    })
    export class FirstStepComponent implements ISubPage {
      getValue(): any {
        return undefined;
      }
    
      *isValidForm(): IterableIterator<string> {
        if(true)  
          yield 'prova';
          
        if(true)
          yield 'msg';
      }
    }

    If at the change of page, isValidForm returns one or more errors, the onValidateEvent event is launched, with the errors found (string []), so that you can manage the errors as you wish.

    The last step is to correctly set up the router.module of the wizard.

    const routes: Routes = [
        {
            path: '',
            component: WizardComponent,
            runGuardsAndResolvers: 'always',
            children: [
                { path: '', redirectTo: 'first-step'},
                {
                  path: 'first-step',
                  component: FirstStepComponent
                },
                {
                    path: 'second-step',
                    component: SecondStepComponent
                },
              ],
        }
    ];
    
    @NgModule({
        imports: [
            RouterModule.forChild(routes)
        ],
        exports: [
            RouterModule
        ]
    })
    export class WizardRoutingModule { }

    You can find an example of implementation at this link: https://github.com/DenMic/ng-toolbar-wizard

    Support

    Any help is welcome. Bug insertion, new methods to implement, code improvement... And don't forget, if you want to support me

    Buy Me A Coffee

    Install

    npm i ng-toolbar-wizard

    DownloadsWeekly Downloads

    1

    Version

    1.1.2

    License

    MIT

    Unpacked Size

    113 kB

    Total Files

    24

    Last publish

    Collaborators

    • den-mich