Angular date format based on locale

Question

I have an Angular 2 application in which I have few inputs of type date. By default those dates are displayed in the format MM/dd/YYYY. I need them to be in the format dd.MM.YYYY. I have fond out that this can be set in the app.module.ts so that you specify the region that have this format. The piece of code that should do the job is:

@NgModule({
 .
 .
 .
  providers: [AuthGuard, {provide: LOCALE_ID, useValue: 'sl'}],
  bootstrap: [AppComponent]
})

This is the HTML part which I want to format

<div class="col-lg-3">
  <fieldset class="form-group">
    <label>Birth date:</label>
    <div class="form-group input-group">
      <div class="input-group-append">
        <span class="input-group-text">
          <i class="fa fa-birthday-cake" aria-hidden="true"></i>
        </span>
      </div>
      <input class="form-control" type="date" [ngModel]="birthDate" />
    </div>
  </fieldset>
</div>

Do anyone have any ide why this is not working?

Answer 1

After a long research I have found out that we cannot change the display format of <input type="date">. The only way to change it is to change the chrome settings to use the local language. In order to archive what I was trying to, you must use a date picker.
Here it's an example:
Angulat material date picker
And for a more detailed read about the Chrome answer to my question, here is the link (the note is from 2012 but it still works as it was working back then):
Chrome and input type date
Thank you all for your time