'Ngx material timepicker field issue in mat dialog

I'm using the ngx material timepicker field inside of a mat dialog and facing an issue where the data is properly mapped to the form group and the time also correctly shows when opening the clock view. But the time does not properly show on the timepicker fields where it still shows the default placeholder of "HH : MM"

https://agranom.github.io/ngx-material-timepicker/ (using the ngx timepicker field example given on this page)

Does the ngx timepicker field not work in mat dialog or is there something I have missed? I am using the same fields at another part of my project (not in a mat dialog) and there it is working as intended.

enter image description here



Solution 1:[1]

Try this,

<mat-form-field>
  <mat-label>Start Time</mat-label>
    <ngx-timepicker-field [format]="24" formControlName="StartTime" required>
    </ngx-timepicker-field>
</mat-form-field>

Wrap your ngx-timepicker-field with <mat-form-field> tag. Also, check that you imported NgxMaterialTimepickerModule and MatDialogModule in the correct module.ts file

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Niromy