@angular-material-components/datetime-picker or ngx-mat-datetime-picker control appears distorted

Question

I am attempting the following code in my app

<mat-form-field>
  <input matInput [ngxMatDatetimePicker]="pickerCustomIcon" placeholder="Choose a date"
    [formControl]="dateControl" [min]="minDate" [max]="maxDate" [disabled]="disabled">
  <ngx-mat-datepicker-toggle matSuffix [for]="pickerCustomIcon"></ngx-mat-datepicker-toggle>
  <ngx-mat-datetime-picker #pickerCustomIcon [showSpinners]="showSpinners" [showSeconds]="showSeconds"
    [stepHour]="stepHour" [stepMinute]="stepMinute" [stepSecond]="stepSecond" [touchUi]="touchUi"
    [color]="color" [enableMeridian]="enableMeridian" [disableMinute]="disableMinute" [hideTime]="hideTime">
    <ngx-mat-datepicker-actions>
      <button mat-button ngxMatDatepickerCancel>Cancel</button>
      <button mat-raised-button color="primary" ngxMatDatepickerApply>Apply</button>
    </ngx-mat-datepicker-actions>
  </ngx-mat-datetime-picker>
</mat-form-field>

I am able to see a field with a datepicker facilitated in that. But when I click on the datepicker, the date picker control's (ngx-mat-datetime-picker) styles are distorted as illustrated by the following screen shot.

I am supposed to see something like this as per the documentations available in https://h2qutc.github.io/angular-material-components/#/datetimepicker

I dont see any explicit documentation for ngx-mat-datetime-picker asking me to include any specific style files in angular.json

Need to fix this. Thanks

Answer 1

I had a hard time figuring out the missing link and ended up fixing it with a work around. I wrapped up the code inside a div tag and applied styles as follows

<div style="position-relative">
  <mat-form-field style="position-absolute ">
    <input matInput [ngxMatDatetimePicker]="pickerCustomIcon" placeholder="Choose a date" [formControl]="dateControl" [min]="minDate" [max]="maxDate" [disabled]="disabled">
    <ngx-mat-datepicker-toggle matSuffix [for]="pickerCustomIcon"></ngx-mat-datepicker-toggle>
    <ngx-mat-datetime-picker #pickerCustomIcon [showSpinners]="showSpinners" [showSeconds]="showSeconds" [stepHour]="stepHour" [stepMinute]="stepMinute" [stepSecond]="stepSecond" [touchUi]="touchUi" [color]="color" [enableMeridian]="enableMeridian" [disableMinute]="disableMinute" [hideTime]="hideTime">
    <ngx-mat-datepicker-actions>
    <button mat-button ngxMatDatepickerCancel>Cancel</button>
    <button mat-raised-button color="primary" ngxMatDatepickerApply>Apply</button>
    </ngx-mat-datepicker-actions>
    </ngx-mat-datetime-picker>
  </mat-form-field>
</div>

add the following to the component's style.scss file

::ng-deep {
    ngx-mat-datepicker-content {
        background-color: white !important;
        position: absolute;
    }
 
    mat-icon {
        font-family: 'Material Icons' !important;
    }
}

That fixed the style issues