mat-datepicker add touchUI condition

Question

I have an ionic application in which I use Angular's mat-datepicker. I want for the web version to get the normal date-picker and on the mobile devices to get the touchUi version. I tried putting *ngIf for the mat-date-picker selector but I start getting 'Cannot read property open of undefined'

       <mat-form-field class="day-datepicker">
           <input [(ngModel)]="FilterOptions.CreatedTo" disabled matInput [matDatepicker]="picker4">

            <mat-datepicker #picker4 *ngIf="_AppConfig.IsCordova" touchUi="true" disabled="false">
            </mat-datepicker>

            <mat-datepicker #picker4 *ngIf="!_AppConfig.IsCordova" disabled="false">
            </mat-datepicker>

        </mat-form-field>

Answer 1

You need to change your code like below.

<mat-form-field class="day-datepicker">
    <input [(ngModel)]="FilterOptions.CreatedTo" disabled matInput [matDatepicker]="picker4">
    <mat-datepicker-toggle matSuffix [for]="picker4"></mat-datepicker-toggle>
    <mat-datepicker #picker4 [touchUi]="_AppConfig.IsCordova" disabled="false"></mat-datepicker>
</mat-form-field>`