Angular displaying date with async data through datePipe

Question

I'm finally able to display all my async data through this tutorial: https://coryrylan.com/blog/using-angular-forms-with-async-data

The only existing problem is that I collect all the data from my Postgres database and the Dates are saved or arrive after a request like this: dateOfBirth: "1997-12-24 00:00:00.0"

I should say that I want to use it to prepopulate input fields for updating a userprofile.

I know that Angular can't handle it like this and I would need an datePipe or something but I really don't know how to use it when I use this to access my data:

export class ProfileComponent implements OnInit {
  ngOnInit() {

      this.buildForm();

      this.user = this.userService.getProfile().pipe(
        tap(user => this.editForm.patchValue(user))
      );
  }

  public buildForm() {
    this.editForm = this.form.group({
      username: ['', [Validators.required, Validators.minLength(this.minLength), CustomValidators.validateCharacters], AlreadyTakenValidator.checkUsername(this.registrationService)],
      email: ['', [Validators.required, Validators.email, CustomValidators.validateCharacters], AlreadyTakenValidator.checkEmail(this.registrationService)],
      oldPassword: ['', [Validators.required], CustomValidators.checkPassword(this.registrationService)],
      newPassword: ['', [Validators.required, CustomValidators.passwordStrength]],
      newPasswordConf: ['', [Validators.required]],
      firstname: ['', [Validators.required, NoWhitespaceValidator()]],
      lastname: ['', [Validators.required, NoWhitespaceValidator()]],
      country: ['', [Validators.required]],
      dateOfBirth: ['', [Validators.required]],
      gender: ['', [Validators.required]],
    }
      , {
        validator: MustMatch('newPassword', 'newPasswordConf')
      })
  }
}

export class User {
    userId: number;
    username: string;
    email: string;
    password: string;
    firstname: string;
    lastname: string;
    token?: string;
    dateOfBirth: Date;
    gender: string;
    country = [] as Array<string>;
    profileImage;
    lastUpdated: Date;
    activated: boolean;
}

Forked StackBlitz of the original idea how it works with a normal date: https://stackblitz.com/edit/angular-2wcq3q?file=src/app/app.component.html

The problematic thing as well will be that I want to change the input type dateFormat through the selected langauge with the i18n-plugin.

In my registration-component I got this working through:

  constructor(
    private translateService: TranslateService,
    private _adapter: DateAdapter<any>
  ) { }

  ngAfterContentChecked() {

    this._adapter.setLocale(this.translateService.currentLang);

but with async requested data from the server that does not work. Because nothing gets shown.

Edit: So maybe let me explain something: the problem appears because the server (database in my case postgres) gives something back to the client that it can't use instantly. In Postgres it gets saved as timestamp without time zone so e.g.: 2019-06-13 10:26:09.322

In my server I save the arriving dates of the client like this:

     DateTimeFormatter inputFormatter = DateTimeFormatter.ofPattern("yyyy-MM-dd'T'HH:mm:ss.SSS'Z'", Locale.ENGLISH);
     LocalDateTime lu = LocalDateTime.parse(lastUpdated, inputFormatter);
     LocalDateTime dob = LocalDateTime.parse(dateOfBirth, inputFormatter);

     this.dateOfBirth = Date.from(dob.atZone(ZoneOffset.UTC).toInstant()); // both are type Date
     this.lastUpdated = Date.from(lu.atZone(ZoneOffset.UTC).toInstant());

I go through many threads on StackOverflow and just read that timezones are annoying as hell and that you should save dates to your database as UTC. But what if I would save them as timestamp with time zone? Would this fix the issue that Angular / the client can't handle the arriving dates instantly? I really want to hold the current way I'm prepopulating the input fields but with this idea I can't change the dates before or I just don't know how.