I have an angular project, in this project I need to use the angular material Datepicker for select Date .

My project support multi language, and when change the language I need to change datepicker value with Angular Material Adapter by language local date time runtime.

For example, I have persian and us-en language in my project. I need when language change to persian , datepicker set the PersianAdapter and when select the us-en language it should set Gregorian Adapter.

When page reloads, it checks the language value and set value for date picker, but I need to change datepicket value without refreshing the page.

I am using this code for Provider :

import { MaterialPersianDateAdapter, PERSIAN_DATE_FORMATS } from './material.persian-date.adapter';
import { GregorianDateAdapter } from './gregorian-date-adapter';
import { MAT_MOMENT_DATE_FORMATS } from './moment-date-format';

export function createDateProvider() {
    const lang = localStorage.getItem('language');
    if (lang === 'fa') {
        return new MaterialPersianDateAdapter();
    } else {
        return new GregorianDateAdapter();
    }
}

export function getDateFormat() {
    const lang = localStorage.getItem('language');
    if (lang === 'fa') {
        return PERSIAN_DATE_FORMATS;
    } else {
        return MAT_MOMENT_DATE_FORMATS;
    }
 }

Module :

providers: [
    { provide: DateAdapter, useFactory: createDateProvider, deps: [MAT_DATE_LOCALE] },
    { provide: MAT_DATE_FORMATS, useFactory: getDateFormat }
  ]

When change language by refreshing the page, it works fine, but when I need to change provider value in order to change the datepicker value by language runtime, it's not working.

I wrote this code but it doesn't work:

ngOnInit() : void {
   let injector = Injector.create([{
      provide: DateAdapter,
      useValue: MaterialPersianDateAdapter,
      deps: [MAT_DATE_LOCALE]
    },
    { provide: MAT_DATE_FORMATS, useFactory: getDateFormat }
    ]);
}

How can I change the datepicker Adapter for selected language ?