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();
    ...