Retrieve the current step index in Angular Material Design Stepper

Question

Retrieve the current step index in Angular Material Design Stepper

In my endeavors to retrieve the selected step within a component utilizing Angular Material Design stepper, I am encountering some issues.

My current approach involves using the selectedIndex property, but it consistently returns "1" instead of the desired value.

<button mat-button mat-flat-button color="primary"
                (click)="onSave(stepper)">
          SAVE
        </button>

onSave(stepper: MatStepper)
  {
    debugger;
    let workflowStepName = this.declarationWorkflowHelper.getWorkflowName(stepper.selectedIndex);

    this.screenSave.next(workflowStepName);
  }

Despite my efforts, I consistently receive "1" as the selected index when I actually anticipate a different result.

angular typescript angular-material

Answer 1

Answer №1

To ensure proper functionality, make sure to explicitly assign stepControl to each respective matStep. For example, you can use firstFormGroup, secondFormGroup:

<mat-step [stepControl]="firstFormGroup">
    <form [formGroup]="firstFormGroup">
      <!-- Code omitted for brevity -->
      <div>
        <button mat-button matStepperNext>Next</button>
      </div>
    </form>
  </mat-step>
  <mat-step [stepControl]="secondFormGroup">
    <form [formGroup]="secondFormGroup">
      <!-- Code omitted for brevity --> 
     <div>
        <button mat-button matStepperPrevious>Back</button>
        <button mat-button matStepperNext>Next</button>
      </div>
    </form>
  </mat-step>

Answer 2

To ensure proper functionality, make sure to explicitly assign stepControl to each respective matStep. For example, you can use firstFormGroup, secondFormGroup:

<mat-step [stepControl]="firstFormGroup">
    <form [formGroup]="firstFormGroup">
      <!-- Code omitted for brevity -->
      <div>
        <button mat-button matStepperNext>Next</button>
      </div>
    </form>
  </mat-step>
  <mat-step [stepControl]="secondFormGroup">
    <form [formGroup]="secondFormGroup">
      <!-- Code omitted for brevity --> 
     <div>
        <button mat-button matStepperPrevious>Back</button>
        <button mat-button matStepperNext>Next</button>
      </div>
    </form>
  </mat-step>

Retrieve the current step index in Angular Material Design Stepper

Answer №1

Similar questions

Tips for refreshing the appearance of a window in angular when it is resized

Insert a new item into the array located within an Observable entity

To determine if two constant objects share identical structures in TypeScript, you can compare their properties

An easy guide to using validators to update the border color of form control names in Angular

Ionic 5 Error: Unable to access 'subscribe' property of undefined object

Splitting code efficiently using TypeScript and Webpack

Angular 12: How to detect when a browser tab is closing and implement a confirmation dialog with MatDialog

Bypass URL Routing for a specific route in Angular 8 and Apache

I'm experiencing unexpected behavior with the use of Mat-Spinner combined with async in Angular 12, particularly when using the rxjs function

Is there a way for the parent class to access the child class in Angular 2?

When Using TypeScript with Serverless, 'this' Becomes Undefined When Private Methods are Called from Public Methods

What is the correct way to effectively integrate react-hook-form with redux and typescript?

Understanding how to handle prop types in a React application using Typescript

You cannot assign multiple properties with the same name to an object literal

Effect fails to activate on the third occurrence of the action

Put Jest to the test by testing the appendFileSync function

Using Angular 4 to populate a form and ensure it remains untouched

Just recently updated to Angular 14 and I'm encountering a problem with images not loading from the assets folder. I'm wondering if there is a configuration step I missed. Could someone please

"Exploring the world of TypeScript Classes in combination with Webpack

Establish a connection with MongoDB and make changes to the data