Angular Material 2 DatePicker, change display format dynamically
You can create another input which will display formated date value. In your html create one input for ngModel and matDatepicker, and another one to display formatted date value.
<div style="position: relative"> <!-- display formatted value --> <mat-form-field> <input matInput [value]="currentDate | dateFilter: dateFormat" [placeholder]="label" autocomplete="off" /> <!--shadow input keep ngModel value--> <input [matDatepicker]="picker" [(ngModel)]="value" class="shadow-dateInput" /> <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle> <mat-datepicker #picker></mat-datepicker> </mat-form-field></div>Here is a working example on Stackblitz