CODEWITHSUNDEEP
angularangular-material
Andrew
Andrew

Reputation: 401

Skip step in Angular Material stepper (depending on some conditions)

I have Angular page with Angular Material stepper, where each step contents are inside an independent component:

<mat-horizontal-stepper [linear]="isLinear" #stepper>
  <mat-step [stepControl]="policyholder" state="phone">
    <ng-template matStepLabel>
     <span class="d-none d-sm-block">Policyholder</span>
    </ng-template>
    <policyholder></policyholder>
  </mat-step>

  <mat-step [stepControl]="policydetails">
    <ng-template matStepLabel><span class="d-none d-sm-block">Policy Details</span></ng-template>
    <policydetails></policydetails>
  </mat-step>

  <mat-step [stepControl]="paymentdetails">
    <ng-template matStepLabel><span class="d-none d-sm-block">Payment Details</span></ng-template>
    <paydetails></paydetails>
  </mat-step>
...
</mat-horizontal-stepper>

Each step has some forms with various fields (inputs, selects etc).

My question is - depending on some select option inside Step 1, is it possible to skip Step 2 and go directly to Step 3? For example, only if "yesOption" is selected below?

Or, as an option - make Step 2 invisible maybe?

<mat-form-field appearance="outline" class=“someClass”>
  <mat-label>Some Condition</mat-label>

  <mat-select placeholder=“Some Select“ formControlName="someControl">
    <mat-option value=“yesOption”>Yes</mat-option>
    <mat-option value=“noOption”>No</mat-option>
  </mat-select>

</mat-form-field>

Currently, I switch to the next step as below:

<button class="someClass" type="submit" [disabled]="policyholderForm.invalid" mat-button matStepperNext>Next Step</button>

I've tried to use selectedIndex to solve this, but it didn't work well. Please advise me how this can be done, thanks in advance!

Upvotes: 8

Views: 10390

Answers (1)

nayakam
nayakam

Reputation: 4261

You could do with *ngIf. Set the boolean enableStep2 flag value based on the value selected on step1.

<mat-step [stepControl]="policydetails" *ngIf="enableStep2">
    <ng-template matStepLabel><span class="d-none d-sm-block">Policy Details</span></ng-template>
    <policydetails></policydetails>
  </mat-step>

Upvotes: 6

Related Questions