how to show Australian date format in Angular 7?

Question

I am using datepicker and I have the following code:

    <mat-form-field>
      <input matInput
        [matDatepicker]="picker"
        placeholder="select a date"
        (dateChange)="setDate($event.value)">
      <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
      <mat-datepicker #picker></mat-datepicker>
    </mat-form-field>
    <mat-form-field>
    <input matInput type="time" value="16:30">
  </mat-form-field>
    <input matInput value="{{ date | date: 'y-MM-dd' }}">

In this datepicker example there is a US date format. I would like to use Australian date format which is dd/mm/yyyy. I am able to create a hidden input and convert it to yyyy-mm-dd format for database purposes but I am unable to show dd/mm/yyyy format in the datepicker input. Could you please help me to show Australian date format instead of US date format in the datapicker field?

Also Is it a good practice the way I am sending the dateformat for DB purposes?

.TS file

  date: string;

  setDate(date: string) {
    this.date = date ? date : 'y-MM-dd';

.HTML file

input matInput [matDatepicker]="picker" placeholder="select a date"
 (dateChange)="setDate($event.value)">

and

 <input type="hidden" matInput value="{{ date | date: 'y-MM-dd' }}">

Answer 1

in your NgModule you want to assign an australian locale to LOCALE_ID....

in the providers in your NgModule add the following...

{ provide: LOCALE_ID, useValue: 'en-au' }

(make sure you import LOCALE_ID).

Answer 2

I recommend you to not customize your Date variables it in that way,

You should define your LOCALE_ID which means that you don't need to use custom format for your Date (or currency, time etc.) variables. For example,

import { LOCALE_ID } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';

platformBrowserDynamic().bootstrapModule(AppModule, {
  providers: [{provide: LOCALE_ID, useValue: 'en-US' }]
});

Source: https://angular.io/api/core/LOCALE_ID#description