Translation stops after first language change

I’m submitting a bug report.

Angular Version: 7.2.12

Library Version: 2.9.0 Browser: all

Language: TypeScript 3.2.4

Context: I am currently trying to translate data in my table.

What I have done:

1. I have enabled translate in my Grid Options.
2. I have added “headerKey” in my Column Definitions to translate my header titles.
3. I have created my own custom formatters to custom dates and currency.
4. I have added “labelKey” to translate my dropdown filter menu.

Current behavior: On the first page load, everything is translated fine. When switching the language for the FIRST time, after the load, everything is still translated fine. But now, after switching the language for a SECOND, THIRD, +, nothing gets translated. (i.e, if I was in English on the first load, the data will show in English, then if I switch to French, the data will show in French, but afterwards, when I switch the language X number of times, the data will stick to French even if the language is English.

Expected behavior: The data should switch language even after the first language switch.

My solution: To fix this issue, I have added my column definitions to my language change listener, on top of having it in my ngOnInit().

ngOnInit() {

        this.columnDefinitions = [
            { id: 'Date', name: 'Date', field: 'transactionDate', sortable: true, exportWithFormatter: true, formatter: this.translateDate },
            {
                id: 'Type', name: 'Type', field: 'activity', formatter: Formatters.translate, sortable: true, exportWithFormatter: true, filterable: true, filter: {
                    collection: [{ value: '', labelKey: 'ALL' }, { value: 'BUY', labelKey: 'BUY' }, { value: 'SELL', labelKey: 'SELL' }],
                    model: Filters.singleSelect, enableTranslateLabel: true
            } },
            { id: 'Quantity', name: 'Quantity', field: 'quantity', headerKey: 'QUANTITY', sortable: true },
            { id: 'Description', name: 'Description', field: 'description', sortable: true },
            {
                id: 'Symbol', name: 'Symbol', field: 'symbol', headerKey: 'SYMBOL', cssClass: 'symbol-input', sortable: true, filterable: true, filter: {
                    model: Filters.inputText,
                }
                },
            { id: 'Price', name: 'Price', field: 'price', headerKey: 'PRICE', exportWithFormatter: true, formatter: this.translateCurrency, sortable: true },
            { id: 'Comm', name: 'Comm', field: 'commission', exportWithFormatter: true, formatter: this.translateCurrency, sortable: true },
            { id: 'Amount', name: 'Amount', field: 'netAmount', headerKey: 'AMOUNT', exportWithFormatter: true, formatter: this.translateCurrency, sortable: true }
        ];
    }

@HostListener('document:langChanged', ['$event'])
    updateAccountNames(event) {
        this.columnDefinitions = [
            { id: 'Date', name: 'Date', field: 'transactionDate', sortable: true, exportWithFormatter: true, formatter: this.translateDate },
            {
                id: 'Type', name: 'Type', field: 'activity', formatter: Formatters.translate, sortable: true, exportWithFormatter: true, filterable: true, filter: {
                    collection: [{ value: '', labelKey: 'ALL' }, { value: 'BUY', labelKey: 'BUY' }, { value: 'SELL', labelKey: 'SELL' }],
                    model: Filters.singleSelect, enableTranslateLabel: true
                }
            },
            { id: 'Quantity', name: 'Quantity', field: 'quantity', headerKey: 'QUANTITY', sortable: true },
            { id: 'Description', name: 'Description', field: 'description', sortable: true },
            {
                id: 'Symbol', name: 'Symbol', field: 'symbol', headerKey: 'SYMBOL', cssClass: 'symbol-input', sortable: true, filterable: true, filter: {
                    model: Filters.inputText,
                }
            },
            { id: 'Price', name: 'Price', field: 'price', headerKey: 'PRICE', exportWithFormatter: true, formatter: this.translateCurrency, sortable: true },
            { id: 'Comm', name: 'Comm', field: 'commission', exportWithFormatter: true, formatter: this.translateCurrency, sortable: true },
            { id: 'Amount', name: 'Amount', field: 'netAmount', headerKey: 'AMOUNT', exportWithFormatter: true, formatter: this.translateCurrency, sortable: true }
        ];
    }

Thank you!

[marcofortin]

Thank you.

Issue solved by adding: this.angularGrid.pluginService.translateColumnHeaders(); in my language switch event.

Best,

[ghiscoding]

Glad you found a way around.

You can also up vote the lib if you like it ⭐ I’d be nice to make it shine more

Cheers from Montreal 😃