NativeScript with i18next - language pipe is not updating the text

[aubrey-fowler]

I'm working on a project with NativeScript 6.4.1 and Angular 8.

I want to use the i18next library in my project: https://www.i18next.com/

Here is my sample repository: https://github.com/aubrey-fowler/i18nextTranslationsTest

Problem: When I change the language, the view is not updating the translation - it's always showing English. Why is it not showing the correct translation?

I followed to directions here to integrate the library with Angular: https://github.com/Romanchuk/angular-i18next

 npm install i18next --save
 npm install angular-i18next --save

Here is a code snippet:

export class ItemsComponent implements OnInit {

    constructor(@Inject(I18NEXT_SERVICE) private i18NextService: ITranslationService) {

        this.i18NextService.events.languageChanged.subscribe(lang => {
            // do something
            console.log(' i18NextService ', lang); //this code is called
        });

    }

    changeLang(lang: string) {
        this.i18NextService.changeLanguage(lang);
    }

    addLang(lang: string) {
        this.i18NextService.addResourceBundle(lang, 'translation', {
            "greeting": "Hej"
        }, true, false);
    }

}

Here is my view:

<ActionBar title="{{ 'greeting' | i18next }}"></ActionBar>

<StackLayout>

    <Label text="{{ 'greeting' | i18next }}"></Label>

    <Button text="en" (tap)="changeLang('en')"></Button>
    <Button text="fr" (tap)="changeLang('fr')"></Button>
    <Button text="nl" (tap)="changeLang('nl')"></Button>

    <Button text="add nl" (tap)="addLang('nl')"></Button>

</StackLayout>

[Romanchuk]

Hello, you should reload page on language change or use i18nextEager pipe

[Romanchuk]

@aubrey-fowler Did you figure it out?

[Romanchuk]

Closed due inactivity