Ionic 2 Simple Conditional Wizard

Ionic 2 Simple Conditional Wizard

ionic 2 wizard


Darwin Medina

Darwin Medina

Member since 2015


iOS, Android  
4 years ago
4 years ago
ionic2, wizard,

Ionic 2 Simple Conditional Wizard

Simple component to handle conditionals steps wizard in ionic 2.

Demo Ionic View

  • ID: 32473D13

Using this component in your projects

  • Paste the downloaded component files in your components folder.
  • Import it and declare the 'IonSimpleWizard' and 'IonSimpleWizardStep' component in the app.module.ts file:

import {IonSimpleWizard} from '../components/ion-simple-wizard/ion-simple-wizard.component'; import {IonSimpleWizardStep} from '../components/ion-simple-wizard/ion-simple-wizard.step.component'; @NgModule({ declarations: [ MyApp, HomePage, IonSimpleWizard, IonSimpleWizardStep ]

  • Now you can use the wizard like this:

<ion-simple-wizard [(step)]="step" [showSteps]="true" (finish)="onFinish()" [finishIcon]="'done-all'" [(stepCondition)]="stepCondition"> <ion-wizard-step> Step 1 content </ion-wizard-step> <ion-wizard-step> Step 2 content </ion-wizard-step> ... <ion-wizard-step> Step N content </ion-wizard-step> </ion-simple-wizard>

Wizard Options

  • [(step)] : step counter of the wizard, set it to 1 by default
  • [showSteps] : true if you want to show the steps counter in the wizard
  • (finish): The event will be fire when the wizard is finish
  • [finishIcon]: ion-icon name for the last step, see the names here: Ionicons
  • [(stepCondition)]: Condition of the next step of the wizard, you can change it in every step.


  • Checkout the ion-simple-wizard-animations.ts file to see the available step and buttons animations.
  • To change the wizard navigation buttons animations go to the file 'ion-simple-wizard.component.ts' and modify the value in the @Component:

animations: WizardAnimations.btnRotate//Change 'btnRotate' for any other animation with the prefix btn

  • To change the step animation go to the file 'ion-simple-wizard.step.component.ts' and modify the value in the @Component:

animations: WizardAnimations.zoom//Change 'zoom' for any other animation


You can subscribe to the following ionic 2 Events:

  • 'step:changed':You can subscribe to the Event 'step:changed' to handle the current step (Return the step value)
  • 'step:next': Do something if next
  • 'step:back' : Do something if back

Ionic Info

  • Cordova CLI: 6.4.0
  • Ionic Framework Version: 2.0.0-rc.3
  • Ionic CLI Version: 2.1.8
  • Ionic App Lib Version: 2.1.4
  • Ionic App Scripts Version: 0.0.47
  • ios-deploy version: 1.8.6
  • ios-sim version: 5.0.3
  • OS: macOS Sierra
  • Node Version: v5.8.0
  • Xcode version: Xcode 8.1 Build version 8B62


  • Android (Tested in 5.1.1)
  • iOS (Tested in 10.2)

Go to repo for more info and the complete demo app