How to add a global language selector that can be used in all sandboxes

[georgms]

Our app has a language selector (simple dropdown with the supported languages). Now, to make sure our components look fine in different languages and locales I would like to add this language selector to the sandboxes.

What I have tried is appending it to the template of the main playground component:

import { Component } from '@angular/core';

@Component({
    selector: 'playground-app',
    template: '<language-selector></language-selector><playground-root></playground-root>'
})
export class PlaygroundComponent {}

The language selector roughly looks like this:

@Component({
    selector: 'language-selector',
    template: `<button *ngFor="let lang of availableLanguages" (click)="language = lang">{{ lang }}</button>`
    styleUrls: ['./language-selector.component.scss']
})
export class LanguageSelectorComponent {
    public availableLanguage: any = AVAILABLE_LANGUAGES;

    constructor(@Inject(DYNAMIC_LANGUAGE_ID) public readonly language$: BehaviorSubject<string>) {}

    public get language(): string {
        return this.language$.value;
    }

    public set language(language: string) {
        this.language$.next(language);
    }
}

As you can see the injection token DYNAMIC_LANGUAGE_ID is used to communicate language changes globally.

It displays fine but changing the language does not have any effect on the translations or localized values such as numbers or dates. This seems to be related to impure pipes (which we use for dynamically localizing numbers and date). This can also be replicated with the async pipe when I built a sandbox for this component:

import { Component, Inject, Input } from '@angular/core';
import { DYNAMIC_LOCALE_ID } from '../../../../providers/dynamic-locale-id/dynamic-locale-id.provider';
import { BehaviorSubject } from 'rxjs';

@Component({
    selector: '…',
    template: `<pre>{{ language$ | async }}</pre>`
})
export class SandboxedComponent {
    constructor(@Inject(DYNAMIC_LOCALE_ID) public readonly language$: BehaviorSubject<string>) {}
}

However, when I add the language selector inside the sandboxed component it works fine, eg.

…
template: `<language-selector></language-selector><pre>{{ language$ | async }}</pre>
…

tl;dr:

• Is there an official to globally manipulate the playground template?
• What might be the issue with the impure pipe?

I'll gladly provide more info or an example project if it helps. Just let me know what you need!

[lurock]

Can you provide and example project?