Dynamically switch RTL/LTR on Kendo UI for Angular

This is working but not dynamically, so we need to change this to work

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { LayoutModule } from '@progress/kendo-angular-layout';
import { RTL } from '@progress/kendo-angular-l10n';


import { AppComponent } from './app.component';

@NgModule({
  imports:      [ BrowserModule, BrowserAnimationsModule, LayoutModule ],

  // Enable Right-to-Left mode for Kendo UI components
  providers:    [{ provide: RTL, useValue: true }],

  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

Use a factory provider to dynamically resolve values

export function enableRTL(): boolean {
  const x = document.cookie;
  const dir = getCookie('dir');

  if (dir === 'rtl') {
    return true;
  }
  return false;
}

{provide: RTL, useFactory: enableRTL}

References
https://www.telerik.com/kendo-angular-ui-develop/components/globalization/localization/
https://plnkr.co/edit/EOFoxuwc6ooUm5Ctho2q?p=preview
https://github.com/telerik/kendo-angular/issues/984

Related