Similar to wz-next, we have the following attributes: That means that clicking that button will send the user to the next step of wizard. Inside the step, we now see a button which has a wz-next attribute. Other directives, bindings, controls, forms, etc. Inside each step, we can put whatever we want. Each step MUST have a title which is going to be used to identify it. Inside the wizard, we can have as many steps as we want.

current-step: You need to set here a property from your scope (similar to ng-model) and that property will always have the name of the current step being shown on the screen.

hide-indicators: If set to true, the indicators in the bottom of the page showing the current page and allowing navigation for the wizard will be hidden.

Edit mode means that all steps have been completed and the user can now navigate to and modify any step.

edit-mode: If set to true, this will set the wizard as edit mode.It's used for the WizardHandler which we'll explain later. By default, it's called 'Default wizard'. The syntax here is very similar to ng-click on-finish: Here you can put a function to be called when the wizard is finished.This wizard directive, has the following options as attributes: You need to declare a master wizard directive.Let's go step by step to see how this works. This will look like the following when you're in the second step: You can use other directives, binding, etc. This is the first step Here you can use whatever you want. The first thing we need to do is add a dependency to angular-wizard module which is called mgo-angular-wizard.

If you have less in your project, I recommend using the less instead of the CSS since it has variables to configure Wizard colors.Īngular-wizard depends on Angular and Lodash (or Underscore).

LESS file with styles for the directive.

CSS files with default styles for the directive.

JS files needed for the directives and services.

The dist folder contains the following files:

200 ema 15 minute chart