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


Topic: how to make angular stepper vertical in mobile media, or small screen, and horizontal in bigger screen

*Expected behavior*Vertical stepper in small screen, and horizontal stepper in bigger screen, like the example in the documentation : https://mdbootstrap.com/docs/angular/components/stepper/#linear-stepper

Actual behavior

nothing happens when i chose small screen, it stays horizontal.

Resources (screenshots, code snippets etc.)

i used the same code in the examples. Web Site documentation :Big Screen : BigScreenSmall Screen : SmallScreen

MyExample - My Situation :

Big ScreenSmall Screen** Or How to change those attributes with Angular ?**Or How to change those attributes


Damian Gemza staff answered 5 years ago

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.


support-info@criq.qc.ca commented 5 years ago

NOT WORKING as i want ... i lose data when i resize the window. :(


it works thanks,

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


Damian Gemza staff commented 5 years ago

So add an onLoad listener and place there the same code.


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 8.0.0
  • Device: Pixel 2
  • Browser: FireFox, Chrome, Edge
  • OS: Windows
  • Provided sample code: No
  • Provided link: Yes