Events in Angular Stepper component

27 Apr 20247 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 component.

created

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

app.component.ts

import { Component } from "@angular/core";

@Component({
imports: [ StepperAllModule, StepperModule ],


standalone: true,
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent  {
  public created(): void {
    //Your required action here
  }
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

app.component.html

<div class="stepper">
  <ejs-stepper (created)="created()">
    <e-steps>
      <e-step></e-step>
      <e-step></e-step>
      <e-step></e-step>
      <e-step></e-step>
    </e-steps>
  </ejs-stepper>
</div>

stepChanged

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

app.component.ts

import { Component } from "@angular/core";
import { StepperChangedEventArgs } from "@syncfusion/ej2-navigations";

@Component({
imports: [ StepperAllModule, StepperModule ],


standalone: true,
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent  {
  public stepChanged(args: StepperChangedEventArgs): void {
    alert("Step changed from "+args.previousStep + " to " + args.activeStep)
  }
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

app.component.html

<div class="stepper">
  <ejs-stepper (stepChanged)="stepChanged($event)">
    <e-steps>
      <e-step></e-step>
      <e-step></e-step>
      <e-step></e-step>
      <e-step></e-step>
    </e-steps>
  </ejs-stepper>
</div>

stepChanging

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

app.component.ts

import { Component } from "@angular/core";
import { StepperChangingEventArgs } from "@syncfusion/ej2-navigations";

@Component({
imports: [ StepperAllModule, StepperModule ],


standalone: true,
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent  {
  public stepChanging(args: StepperChangingEventArgs): void {
    alert("Step changing from "+args.previousStep + " to " + args.activeStep)
  }
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

app.component.html

<div class="stepper">
  <ejs-stepper (stepChanging)="stepChanging($event)">
    <e-steps>
      <e-step></e-step>
      <e-step></e-step>
      <e-step></e-step>
      <e-step></e-step>
    </e-steps>
  </ejs-stepper>
</div>

stepClick

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

app.component.ts

import { Component } from "@angular/core";
import { StepperClickEventArgs } from "@syncfusion/ej2-navigations";

@Component({
imports: [ StepperAllModule, StepperModule ],


standalone: true,
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent  {
  public stepClick(args: StepperClickEventArgs): void {
    //Your required action here
  }
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

app.component.html

<div class="stepper">
  <ejs-stepper (stepClick)="stepClick($event)">
    <e-steps>
      <e-step></e-step>
      <e-step></e-step>
      <e-step></e-step>
      <e-step></e-step>
    </e-steps>
  </ejs-stepper>
</div>

beforeStepRender

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

app.component.ts

import { Component } from "@angular/core";
import { StepperRenderingEventArgs } from "@syncfusion/ej2-navigations";

@Component({
imports: [ StepperAllModule, StepperModule ],


standalone: true,
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent  {
  public beforeStepRender(args: StepperRenderingEventArgs): void {
    //Your required action here
  }
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

app.component.html

<div class="stepper">
  <ejs-stepper (beforeStepRender)="beforeStepRender($event)">
    <e-steps>
      <e-step></e-step>
      <e-step></e-step>
      <e-step></e-step>
      <e-step></e-step>
    </e-steps>
  </ejs-stepper>
</div>