style not loaded initially, but when click on regular material date picker after that style works fine for ngx-datetime picker

[siddharthcn21]

https://stackoverflow.com/questions/77144931/angular-material-components-datetime-picker-style-not-loading-initially-but-wor

I am having the exact same issue as mentioned in above link.

below is my package.json

"dependencies": {
"@angular-material-components/datetime-picker": "^16.0.1",
"@angular-material-components/moment-adapter": "^16.0.1",
"@angular/animations": "^16.1.0",
"@angular/cdk": "^16.2.5",
"@angular/common": "^16.1.0",
"@angular/compiler": "^16.1.0",
"@angular/core": "^16.1.0",
"@angular/forms": "^16.1.0",
"@angular/material": "^16.2.5",
"@angular/material-moment-adapter": "^16.1.5",
"@angular/platform-browser": "^16.1.0",
"@angular/platform-browser-dynamic": "^16.1.0",
"@angular/router": "^16.1.0",
"@angular/service-worker": "^16.1.0",
"@ngx-translate/core": "^15.0.0",
"@ngx-translate/http-loader": "^8.0.0",
"@ngxs/storage-plugin": "3.8.1",
"@ngxs/store": "^3.8.1",
"moment": "^2.29.4",
"ng-inline-svg-2": "^15.0.1",
"ngx-progressbar": "^9.0.0",
"rxjs": "~7.8.0",
"tslib": "^2.3.0",
"zone.js": "~0.13.0"
},
"devDependencies": {
"@angular-devkit/build-angular": "^16.1.5",
"@angular/cli": "~16.1.5",
"@angular/compiler-cli": "^16.1.0",
"@types/jasmine": "~4.3.0",
"jasmine-core": "~4.6.0",
"karma": "~6.4.0",
"karma-chrome-launcher": "~3.2.0",
"karma-coverage": "~2.2.0",
"karma-jasmine": "~5.1.0",
"karma-jasmine-html-reporter": "~2.1.0",
"typescript": "~5.1.3"
}

[ArcosBinary]

We have the same issue since Angular 16. It's very critical imo and we need to think about removing this component completely. Last update is 6 months ago and we want to update to angular 17 soon. :/
Anyway the workaround is pretty annoying:

app.component:

<mat-form-field id="load-styles-picker" style="position: absolute; visibility: hidden;">
  <input matInput [matDatepicker]="loadStylesPicker">
  <mat-datepicker-toggle matIconSuffix [for]="loadStylesPicker"></mat-datepicker-toggle>
  <mat-datepicker #loadStylesPicker></mat-datepicker>
</mat-form-field>```

private initNgxTimepickerStyles(): void {
    this.loadStylesPicker.open();
    this.changeDetector.detectChanges()
    this.loadStylesPicker.close();
    this.changeDetector.detectChanges()
    document.getElementById('load-styles-picker')?.remove();
  }

  ngAfterViewInit(): void {
    this.initNgxTimepickerStyles();
    ...