[Angular 16] Angular 16.2.1. breaks the styling of the datetimepicker component

[bastianferch]

Angular 16.2.1. removes the complete styling of the datetimepicker component. In version 16.0.1. everything is working fine. See this stackoverflow post

[stephen-dirtcreative]

It seems the material styles for the date picker don't get injected. If you have a standard mat-datepicker implemented and load that, after viewing it, this component inherits the injected styles and looks correct again.

There seems to be something in material now known as the "Tokens API" and the datepicker was updated to use it between 16.1 and 16.2

See commit: https://github.com/angular/components/pull/27503/commits/c5af86017674391c96f6f4e75df723ac93a5993d

---

Not being familiar in depth with material component building, I didn't feel confident trying to figure out a patch for the changes. What I did as a hack to avoid needing to down-level my main material library was to place a standard component on the page where the datetime picker component was used, style it absolute and off screen, hooked it with @ViewChild and forced an open / close of it in the AfterViewInit to "initialize" the missing styles. Something like this:

In the template

  <mat-form-field class="date-time-field" subscriptSizing="dynamic" style="position: absolute; top: -10000px; left: -10000px; visibility: hidden;">
    <input matInput [matDatepicker]="fauxPicker">
    <mat-datepicker-toggle matIconSuffix [for]="fauxPicker"></mat-datepicker-toggle>
    <mat-datepicker #fauxPicker></mat-datepicker>
  </mat-form-field>

In the component TS file (just the relevant bits)

import { ChangeDetectorRef, ViewChild } from '@angular/core'
import { MatDatepicker } from '@angular/material/datepicker'

@Component({ ... })
export class SomeClass implements AfterViewInit {
  @ViewChild('fauxPicker')
  private readonly fauxPicker: MatDatepicker<null>

  public constructor (
    private readonly changeDetectorRef: ChangeDetectorRef,
  ) {}

  public ngAfterViewInit (): void {
    if (this.fauxPicker !== undefined) {
      this.fauxPicker.open()
      this.changeDetectorRef.detectChanges()
      this.fauxPicker.close()
      this.changeDetectorRef.detectChanges()
    }
  }
}

This brings the styles into the view and the ngx datetime picker loads correctly, at least in my scenario.

[AlexElin]

duplicate of https://github.com/h2qutc/angular-material-components/issues/348