Description
Feature Description
I'm writing an application which should support multiple locales and I would like already rendered calendar objects to reflect the change when the user decides to switch locales.
Use Case
The locale switching is tied to a request for language change. I'm using @ngx-translate for this. Below is a crude example using two locales (English and Norwegian):
this.translate.onLangChange.subscribe(lng => {
this.dateAdapter.getFirstDayOfWeek = () => (lng === 'en' ? 0 : 1);
this.dateAdapter.setLocale(lang === 'en' ? 'en-US' : 'nb');
});
The calendar object is rendered inside a mat-menu, and does not destruct when the menu is closed - only hidden.
<mat-menu #dialog="matMenu">
<mat-calendar cdkTrapFocus
[startAt]="value"
[minDate]="min"
[maxDate]="max"
[selected]="value"
(selectedChange)="select($event)">
</mat-calendar>
</mat-menu>
So initially, when the application starts, the locale and first day of week is set to whatever the default language is at that point (set from browsers default language). But after user initiated language change, any change I do to the dateAdapter has no effect on the currently rendered mat-calendar.
I would like a way to trigger a re-render of the calendar using the current settings, and I had hoped that setting the locale would trigger this.
Workaround
I've worked around this by adding a *ngIf="_reload" to the <mat-calendar, and then toggling the reload in order to destroy the calendar and recreate it:
this.translate.onLangChange.subscribe(lang => {
setTimeout(() => this._reload = false );
setTimeout(() => this._reload = true );
});
But this seems to be a hack. Would very much like a better solution.