JavaScript Edu Resources. Angular Courses. React Tutorials. Join us!


Wizard component for Angular 2

  • The first three layouts are showing circles with or without a background, for each step of your wizard, in the navigation bar.
  • The second two layouts and optionally add a symbol in the center of the circle, for each step of your wizard, in the navigation bar, if such a symbol has been defined for the step.
  • For example, if you want to show the icon with the unicode of FontAwesome inside a step circle in the navigation bar, then you need to set the input attribute of the step to and the to :

    If you have an additional check or validation you need to perform to decide, if the step can be exited (both to the next step and to the previous step), you can either pass a boolean or a function, taking a enum and returning a boolean, to the attribute of the wizard step.

  • Similar to you can add a attribute to the wizard step environment, if you want to call a function every time a wizard step is exited either by pressing on a component with a or directive, or by a click on the navigation bar.
  • Alternatively to an absolute step index, it’s also possible to set the destination wizard step as an offset to the source step:

    In this example a click on the “Go to the third Step” button will move the user to the next step compared to the step the button belongs to.