internationalization - Render Angular component in a locale which is calculated dynamically

Question

I would like to give user opportunity to render one component in a locale which is may be different to application locale.

Something like that (code below does not work, component is being rendered in a application locale)

@Component({
    selector: 'preview',
    templateUrl: './preview.html',
    styleUrls: ['./preview.scss'],
    providers: [
        {
            provide: LOCALE_ID,
            useFactory: () => window.location.href.indexOf('preview=true') >= 0 ? 'ja' : 'en'
        }
    ],
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class PreviewComponent {

    constructor(@Inject(LOCALE_ID) private locale: any) {
        console.log(this.locale); // Here injected locale is correct (ja or en) but component is rendered in current application's locale.
    }

}

---

Alternatively, since my component is quite small, I'm fine to render it by myself in a proper locale if Angular provides a way to access localization bundles, i.e.

@Component({
    selector: 'preview',
    templateUrl: './preview.html',
    styleUrls: ['./preview.scss'],
    providers: [
        {
            provide: LOCALE_ID,
            useFactory: () => window.location.href.indexOf('preview=true') >= 0 ? 'ja' : 'en'
        }
    ],
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class PreviewComponent {

    hello: string;
    
    constructor(@Inject(LOCALE_ID) private locale: any, 
        private angularTranslationService: angularTranslationService // IS THERE SUCH ONE????
) {
        this.hello = this.angularTranslationService.localize(locale, '@@my.i18n.custom.id.for.hello.string'); // IS THERE SUCH API???? 
    }

}

question from:https://stackoverflow.com/questions/65847472/render-angular-component-in-a-locale-which-is-calculated-dynamically

Answer 1

Waitting for answers