how to make angular stepper vertical in mobile media, or sma

Dear @support-info@criq.qc.ca

I have tried to reproduce your problem with losing data but without success. For me, the below code works fine - when the window.innerWidth is less or equal than 768, the stepper is vertical, else it's horizontal.

When the stepper change from horizontal to vertical and opposite, I'm not losing any data from it.

Please take a look at my code:

.html:

<div class="row">
  <div class="col-md-12 mx-auto my-5">
    <mdb-stepper #stepper [linear]="true" [vertical]="isVertical">
      <mdb-step name="Step 1" [stepForm]="firstFormGroup">
        <form [formGroup]="firstFormGroup">
          <div class="md-form">
            <input type="text" class="form-control" mdbInput mdbValidate formControlName="email">
            <label for="">Email</label>
            <mdb-error *ngIf="email.invalid && (email.dirty || email.touched)">Input invalid</mdb-error>
            <mdb-success *ngIf="email.valid && (email.dirty || email.touched)">Input valid</mdb-success>
          </div>
        </form>
        <button mdbBtn size="sm" color="primary" (click)="stepper.next()">CONTINUE</button>
      </mdb-step>
      <mdb-step name="Step 2" [stepForm]="secondFormGroup">
        <form [formGroup]="secondFormGroup">
          <div class="md-form">
            <input type="password" class="form-control" mdbInput mdbValidate formControlName="password">
            <label for="">Password</label>
            <mdb-error *ngIf="password.invalid && (password.dirty || password.touched)">Input invalid</mdb-error>
            <mdb-success *ngIf="password.valid && (password.dirty || password.touched)">Input valid</mdb-success>
          </div>
        </form>
        <button mdbBtn size="sm" color="primary" (click)="stepper.next()">CONTINUE</button>
        <button mdbBtn size="sm" color="secondary" (click)="stepper.previous()">BACK</button>
      </mdb-step>
      <mdb-step name="Step 3" label="Step 3 label">
        <p class="pl-2">Finish!</p>
        <div class="step-actions">
          <button mdbBtn  size="sm" color="primary" (click)="onSubmit()">SUBMIT</button>
        </div>
      </mdb-step>
    </mdb-stepper>
  </div>
</div>

.ts:

firstFormGroup: FormGroup;
  secondFormGroup: FormGroup;
  isVertical = false;

  @HostListener('window:resize') onWindowResize() {

    if (window.innerWidth <= 768) {
      this.isVertical = true;
    } else {
      this.isVertical = false;
    }
  }

  ngOnInit() {
    this.firstFormGroup = new FormGroup({
      email: new FormControl('', [Validators.required, Validators.email])
    });
    this.secondFormGroup = new FormGroup({
      password: new FormControl('', Validators.required)
    });
  }

  get email() { return this.firstFormGroup.get('email'); }
  get password() { return this.secondFormGroup.get('password'); }

  onSubmit() {
    // do something here
  }

Best Regards,

Damian

i found a solution :in your HTML:

<mdb-stepper #stepper class="test" [vertical]="VerticalOrHorizontalStepper()">

In your xxx.component.ts:

@HostListener('window:resize', ['$event'])

VerticalOrHorizontalStepper() {
return (window.innerWidth < 800); }}

and call this function in your ngOnInit()

ngOnInit() {
....
this.VerticalOrHorizontalStepper(); 
....}

If you have any better suggestion, plz don't hesitate !

thanks.

it works thanks,

but it's working only onresize, but not onLoad also ?