A set of angular directives to create a wizard using Ionic's slide box

View the Project on GitHub arielfaur/ionic-wizard

If you've found this project useful please consider donating to support further development. Thank you!


A set of Angular directives to create a startup wizard component using Ionic's slide box

Sample Projects

There are two sample Ionic projects included. They may be run locally with ionic serve


A simple wizard as shown in the demo above, run each time the app is launched.


A first time wizard with localStorage integration, runs only once and saves some settings in the localStorage.

Getting Started

bower install ionic-wizard

Add JS file

<script src="dist/ion-wizard.js"></script>

Add dependencies

angular.module('myApp', ['ionic', 'ionic.wizard'])

Create your wizard template and add wizard directives


Add this directive to any link or button to add back behavior. Back button will be hidden on the first step of the wizard.

<button class="button button-light" ion-wizard-previous>Back</button>


Add this directive to any link or button to add next behavior. Next button will be hidden on the last step of the wizard.

<button class="button button-light" ion-wizard-next>Next</button>


Use this directive to attach a callback to the start button to launch the app. The button will be shown only in the last step of the wizard.

Add a condition attribute to define a condition for the last step prior to launching the app.

<button class="button button-light" ion-wizard-start="start()">Start App</button>


Main wizard directive must be added to Ionic's ion-slide-box directive

<ion-slides ion-wizard>


Apply this directive to an ion-slide to define each step of the wizard. If needed, a next-condition can be defined which will be evaluated before allowing the user to move forward. An event is generated if the condition fails that can be used to inform the user or perform any other action from the controller. Apply the has-header class to add some top padding in case there is a navigation bar.

<ion-slide-page ion-wizard-step next-condition="user.LastName != undefined" class="has-header">

Then in your app controller:

    .controller('IntroCtrl', ['$scope', '$ionicPopup', function($scope, $ionicPopup) {
        $scope.$on('wizard:StepFailed', function(e, args) {
            if (args.index == 1 && args.direction == "next") {
                    title: 'Empty field',
                    template: 'Please enter a value!'
                }).then(function (res) {
                    console.log('Field is empty');

A prev-condition attribute can be defined for conditionally allowing a user to move backward in the wizard. It operates the same way as the next-condition


To make the content scrollable within a particular slide wrap the content in a ion-content directive. If there is a navigation bar apply the has-header class to this directive instead of the outer ion-slide.

<ion-slide-box ion-wizard>
        <ion-slide ion-wizard-step>
            <ion-content class="has-header">
                <div class="row">