Events in EJ2 TypeScript Stepper control

5 Jan 202411 minutes to read

This section describes the Stepper events that will be triggered when an appropriate actions are performed. The following events are available in the Stepper control.

created

The Stepper control triggers the created event when the control rendering is completed.

import { Stepper } from '@syncfusion/ej2-navigations';

let stepper: Stepper = new Stepper({
  steps: [{}, {}, {}, {}],
  created: () => {
    //Your required action here
  }
});

stepper.appendTo('#stepper');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 - Stepper</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
    <meta name="description" content="Essential JS 2" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-navigations/styles/material.css" rel="stylesheet" />
    <!--system js reference and configuration-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
    <style>
        #container {
          margin-top: 30px;
          padding: 30px;
        }
    </style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
    <div id='loader'>LOADING....</div>
    <div id='container'>
        <nav id="stepper"></nav>
    </div>
</body>
</html>

stepChanged

The Stepper control triggers the stepChanged event after the active step is changed.

import { Stepper, StepperChangedEventArgs } from '@syncfusion/ej2-navigations';

let stepper: Stepper = new Stepper({
  steps: [{}, {}, {}, {}],
  stepChanged: (args: StepperChangedEventArgs) => {
    alert("Step Changed from "+args.previousStep + " to " + args.activeStep)
  }
});

stepper.appendTo('#stepper');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 - Stepper</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
    <meta name="description" content="Essential JS 2" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-navigations/styles/material.css" rel="stylesheet" />
    <!--system js reference and configuration-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
    <style>
        #container {
            margin-top: 30px;
            padding: 30px;
        }
    </style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
    <div id='loader'>LOADING....</div>
    <div id='container'>
        <nav id="stepper"></nav>
    </div>
</body>
</html>

stepChanging

The Stepper control triggers the stepChanging event before the active step change.

import { Stepper, StepperChangingEventArgs } from '@syncfusion/ej2-navigations';

let stepper: Stepper = new Stepper({
  steps: [{}, {}, {}, {}],
  stepChanging: (args: StepperChangingEventArgs) => {
    alert("Step changing from "+args.previousStep + " to " + args.activeStep)
  }
});

stepper.appendTo('#stepper');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 - Stepper</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
    <meta name="description" content="Essential JS 2" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-navigations/styles/material.css" rel="stylesheet" />
    <!--system js reference and configuration-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
    <style>
        #container {
          margin-top: 30px;
          padding: 30px;
        }
    </style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
    <div id='loader'>LOADING....</div>
    <div id='container'>
        <nav id="stepper"></nav>
    </div>
</body>
</html>

stepClick

The Stepper control triggers the stepClick event when the step is clicked.

import { Stepper, StepperClickEventArgs } from '@syncfusion/ej2-navigations';

let stepper: Stepper = new Stepper({
  steps: [{}, {}, {}, {}],
  stepClick: (args: StepperClickEventArgs) => {
    //Your required action here
  }
});

stepper.appendTo('#stepper');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 - Stepper</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
    <meta name="description" content="Essential JS 2" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-navigations/styles/material.css" rel="stylesheet" />
    <!--system js reference and configuration-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
    <style>
        #container {
          margin-top: 30px;
          padding: 30px;
        }
    </style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
    <div id='loader'>LOADING....</div>
    <div id='container'>
        <nav id="stepper"></nav>
    </div>
</body>
</html>

beforeStepRender

The Stepper control triggers the beforeStepRender event before rendering each step.

import { Stepper, StepperRenderingEventArgs } from '@syncfusion/ej2-navigations';

let stepper: Stepper = new Stepper({
  steps: [{}, {}, {}, {}],
  beforeStepRender: (args: StepperRenderingEventArgs) => {
    //Your required action here
  }
});

stepper.appendTo('#stepper');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 - Stepper</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
    <meta name="description" content="Essential JS 2" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-navigations/styles/material.css" rel="stylesheet" />
    <!--system js reference and configuration-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
    <style>
        #container {
            margin-top: 30px;
            padding: 30px;
        }
    </style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
    <div id='loader'>LOADING....</div>
    <div id='container'>
        <nav id="stepper"></nav>
    </div>
</body>
</html>