CODEWITHSUNDEEP
angularangular-materialmat-stepper
Amirkhan
Amirkhan

Reputation: 36

How can i show Angular mat stepper horizontal even in a mobile view?

Anular mat stepper is showing vertical in mobile view. I don't want to show Angular mat stepper vertical view. Pelase help.

Here is my code -

  <mat-horizontal-stepper #stepper
        [@.disabled]="true"
        [linear]="isLinear"
        class="example-stepper"
        [orientation]="(stepperOrientation | async)!"
      >
        <mat-step [stepControl]="firstFormGroup" label="Setup Piggy Bank" [editable]="!this.alreadyExistUser">
          <form [formGroup]="firstFormGroup">
            <div formControlName="firstCtrl" ngDefaultControl>
              <app-create-savings-plan [planInfoData]="planInfoData" [storeData]="storeData" (savingPlanDetails)="submitSavingPlanDetails($event)"></app-create-savings-plan>
            </div>
            <!-- <div>
              <button mat-button matStepperNext>Next</button>
            </div> -->
          </form>
        </mat-step>
        <mat-step [stepControl]="thirdFormGroup" label="Confirm">
          <form [formGroup]="thirdFormGroup">
           <div formControlName="thirdCtrl" ngDefaultControl>
            <app-confirm-plan [createdSavingsPlanInfo]="createdSavingsPlanInfo" [storeData]="storeData" (confirmPlan)="confirmCreatedPlan($event)"></app-confirm-plan>
           </div>
            <!-- <div>
              <button mat-button matStepperPrevious>Back</button>
              <button mat-button matStepperNext>Next</button>
            </div> -->
          </form>
        </mat-step>
      </mat-horizontal-stepper>

Upvotes: 0

Views: 561

Answers (0)

Related Questions