Angular - matDatepicker not working properly

Question

I have 3 components

main.component.html
mobile-main.component.html
desktop-main.component.html

Based on device width i want to load different view(totally different UI) using MediaMatcher & ChangeDetectorRef

My problem is when using matDatepicker it's not working properly. When I change orientation Desktop / Mobile UI loaded working properly, But when I click on date picker it's not popping up after changing orientation(but popping up from 2nd click onwards).

We can use chrome toggle-device-toolbar to simulate.

main.component.html

<app-desktop-main *ngIf="!mobileQuery.matches"></app-desktop-main>
<app-mobile-main *ngIf="mobileQuery.matches"></app-mobile-main>

main.component.ts

export class MainComponent implements OnInit, OnDestroy {

  mobileQuery: MediaQueryList;

  _mobileQueryListener: () => void;

constructor(changeDetectorRef: ChangeDetectorRef, media: MediaMatcher) {
    this.mobileQuery = media.matchMedia('(max-width: 760px)');
    this._mobileQueryListener = () => changeDetectorRef.detectChanges();
    this.mobileQuery.addListener(this._mobileQueryListener);
  }

}

mobile-main.component.html

<mat-form-field>
  <input matInput [matDatepicker]="picker" placeholder="Choose a date">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

mobile-main.component.ts

export class MobileMainComponent implements OnInit, OnDestroy {

constructor() {

  }

}

desktop-main.component.html

<mat-form-field>
  <input matInput [matDatepicker]="picker" placeholder="Choose a date">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

desktop-main.component.ts

export class DesktopMainComponent implements OnInit, OnDestroy {

constructor() {

  }

}

DanGo · Accepted Answer · 2019-05-28 15:25:34Z

1

Material datepicker has an option for touch ui. For your mobile component add touchUi for what was the dropdown element:

<mat-form-field>
  <input matInput [matDatepicker]="picker" placeholder="Choose a date">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker touchUi #picker></mat-datepicker>
</mat-form-field>

I'm not sure that will help the weird behavior you are noticing, but since you are not using something that is optimized for mobile it may solve the issue.

answered May 28, 2019 at 15:25

DanGo

4282 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular - matDatepicker not working properly

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related