Localization using ngx-translate

[Michael]

Hi!

Is it possible to use ngx-translate like this with the @progress/kendo-angular-l10n MessageService and the kendo-angular-messages!

An example of such an implementation would be great!

 

 

[Svet]

Hi Michael,

Currently, we do not have such example demonstrating the use of ngx-translate with Kendo UI for Angular. It (ngx-translate) is a third party library which has its own features and dedicated support. We are not sure if the two products are compatible. Indeed in the future we could research if it is possible and create such a how-to example, but we will need to get a measurable demand for such example. Thus we will need to have a logged feature request item in our Feedback Portal where other clients will be able to vote for it. Please free to log the feature request with the desired details or let me know if you would like me to log it on your behalf.

In general, as far as I am acquainted with ngx-translate it provides translations run-time. Thus I believe that it should be combined with our MessageService, which allows to translate the Kendo UI for Angular built-in messages dynamically. For the purpose a list of translations will have to be provided for each used language within the MessageService. Please check the following article and example from our documentation demonstrating this approach:

https://www.telerik.com/kendo-angular-ui/components/globalization/localization/messages/#toc-updating-messages-dynamically

For a full set of translatable messages for the Grid please check the CustomMessagesComponent:

https://www.telerik.com/kendo-angular-ui/components/grid/api/CustomMessagesComponent/

such component is available for each Kendo UI for Angular package.

Let me know in case I can provide any further information on this case.

 Regards,
Svetlin
Progress Telerik

[Michael]

Hi Svetlin,

thx for the replay. I have implemented my own MessageService like this:

https://www.telerik.com/kendo-angular-ui/components/globalization/localization/messages/#toc-updating-messages-dynamically

and listed the grid messages that i found in the kendo-angular-messages node

001.import { Injectable } from '@angular/core';
002.import { MessageService as KendoMessageService } from '@progress/kendo-angular-l10n';
003.
004.const data = {
005.    de: {
006.        rtl: false,
007.        messages: {
008.            'kendo.grid.groupPanelEmpty': 'Ziehen Sie eine Spaltenüberschrift hierher, um nach dieser Spalte zu gruppieren',
009.            'kendo.grid.noRecords': 'Keine Datensätze verfügbar.',
010.            'kendo.grid.pagerFirstPage': 'Zur ersten Seite',
011.            'kendo.grid.pagerPreviousPage': 'Zur vorherigen Seite',
012.            'kendo.grid.pagerNextPage': 'Zur nächsten Seite',
013.            'kendo.grid.pagerLastPage': 'Zur letzten Seite',
014.            'kendo.grid.pagerPage': 'Seite',
015.            'kendo.grid.pagerOf': 'von',
016.            'kendo.grid.pagerItems': 'Elementen',
017.            'kendo.grid.pagerItemsPerPage': 'Elemente pro Seite',
018.            'kendo.grid.filter': 'Filter',
019.            'kendo.grid.filterEqOperator': 'ist gleich',
020.            'kendo.grid.filterNotEqOperator': 'ist nicht gleich',
021.            'kendo.grid.filterIsNullOperator': 'ist Null',
022.            'kendo.grid.filterIsNotNullOperator': 'ist nicht Null',
023.            'kendo.grid.filterIsEmptyOperator': 'ist leer',
024.            'kendo.grid.filterIsNotEmptyOperator': 'ist nicht leer',
025.            'kendo.grid.filterStartsWithOperator': 'beginnt mit',
026.            'kendo.grid.filterContainsOperator': 'beinhaltet',
027.            'kendo.grid.filterNotContainsOperator': 'beinhaltet nicht',
028.            'kendo.grid.filterEndsWithOperator': 'endet mit',
029.            'kendo.grid.filterGteOperator': 'ist größer als oder gleich',
030.            'kendo.grid.filterGtOperator': 'ist größer als',
031.            'kendo.grid.filterLteOperator': 'ist kleiner oder gleich als',
032.            'kendo.grid.filterLtOperator': 'ist kleiner als',
033.            'kendo.grid.filterIsTrue': 'ist richtig',
034.            'kendo.grid.filterIsFalse': 'ist falsch',
035.            'kendo.grid.filterBooleanAll': '(Alle)',
036.            'kendo.grid.filterAfterOrEqualOperator': 'ist gleich oder später als',
037.            'kendo.grid.filterAfterOperator': 'ist später als',
038.            'kendo.grid.filterBeforeOperator': 'ist früher als',
039.            'kendo.grid.filterBeforeOrEqualOperator': 'ist gleich oder früher als',
040.            'kendo.grid.filterFilterButton': 'Filtern',
041.            'kendo.grid.filterClearButton': 'Löschen',
042.            'kendo.grid.filterAndLogic': 'und',
043.            'kendo.grid.filterOrLogic': 'oder',
044.            'kendo.grid.loading': 'Laden',
045.            'kendo.grid.sort': 'Sortieren',
046.            'kendo.grid.columnMenu': 'Spaltenmenü',
047.            'kendo.grid.columns': 'Spalten',
048.            'kendo.grid.lock': 'Sperren',
049.            'kendo.grid.unlock': 'Entsperren',
050.            'kendo.grid.sortAscending': 'Aufsteigend sortieren',
051.            'kendo.grid.sortDescending': 'Absteigend sortieren',
052.            'kendo.grid.columnsApply': 'Übernehmen',
053.            'kendo.grid.columnsReset': 'Zurücksetzen'
054.        }
055.    },
056.    en: {
057.        rtl: false,
058.        messages: {
059.            'kendo.grid.groupPanelEmpty': 'Drag a column header and drop it here to group by that column',
060.            'kendo.grid.noRecords': 'No records available.',
061.            'kendo.grid.pagerFirstPage': 'Go to the first page',
062.            'kendo.grid.pagerPreviousPage': 'Go to the previous page',
063.            'kendo.grid.pagerNextPage': 'Go to the next page',
064.            'kendo.grid.pagerLastPage': 'Go to the last page',
065.            'kendo.grid.pagerPage': 'Page',
066.            'kendo.grid.pagerOf': 'of',
067.            'kendo.grid.pagerItems': 'items',
068.            'kendo.grid.pagerItemsPerPage': 'items per page',
069.            'kendo.grid.filter': 'Filter',
070.            'kendo.grid.filterEqOperator': 'Is equal to',
071.            'kendo.grid.filterNotEqOperator': 'Is not equal to',
072.            'kendo.grid.filterIsNullOperator': 'Is null',
073.            'kendo.grid.filterIsNotNullOperator': 'Is not null',
074.            'kendo.grid.filterIsEmptyOperator': 'Is empty',
075.            'kendo.grid.filterIsNotEmptyOperator': 'Is not empty',
076.            'kendo.grid.filterStartsWithOperator': 'Starts with',
077.            'kendo.grid.filterContainsOperator': 'Contains',
078.            'kendo.grid.filterNotContainsOperator': 'Does not contain',
079.            'kendo.grid.filterEndsWithOperator': 'Ends with',
080.            'kendo.grid.filterGteOperator': 'Is greater than or equal to',
081.            'kendo.grid.filterGtOperator': 'Is greater than',
082.            'kendo.grid.filterLteOperator': 'Is less than or equal to',
083.            'kendo.grid.filterLtOperator': 'Is less than',
084.            'kendo.grid.filterIsTrue': 'is true',
085.            'kendo.grid.filterIsFalse': 'is false',
086.            'kendo.grid.filterBooleanAll': '(All)',
087.            'kendo.grid.filterAfterOrEqualOperator': 'Is after or equal to',
088.            'kendo.grid.filterAfterOperator': 'Is after',
089.            'kendo.grid.filterBeforeOperator': 'Is before',
090.            'kendo.grid.filterBeforeOrEqualOperator': 'Is before or equal to',
091.            'kendo.grid.filterFilterButton': 'Filter',
092.            'kendo.grid.filterClearButton': 'Clear',
093.            'kendo.grid.filterAndLogic': 'And',
094.            'kendo.grid.filterOrLogic': 'Or',
095.            'kendo.grid.loading': 'Loading',
096.            'kendo.grid.sort': 'Sort',
097.            'kendo.grid.columnMenu': 'Column Menu',
098.            'kendo.grid.columns': 'Columns',
099.            'kendo.grid.lock': 'Lock',
100.            'kendo.grid.unlock': 'Unlock',
101.            'kendo.grid.sortAscending': 'Sort Ascending',
102.            'kendo.grid.sortDescending': 'Sort Descending',
103.            'kendo.grid.columnsApply': 'Apply',
104.            'kendo.grid.columnsReset': 'Reset'
105.        }
106.    }
107.};
108.
109.export class MessageService extends KendoMessageService
110.{
111.    public set language(value: string)
112.    {
113.        const lang = data[value];
114.        if (lang) {
115.            this.localeId = value;
116.            this.notify(lang.rtl);
117.        }
118.    }
119.
120.    public get language(): string
121.    {
122.        return this.localeId;
123.    }
124.
125.    private localeId = 'en';
126.    private get messages(): any
127.    {
128.        const lang = data[this.localeId];
129.
130.        if (lang) {
131.            return lang.messages;
132.        }
133.    }
134.
135.    public get(key: string): string
136.    {
137.        return this.messages[key];
138.    }
139.}

 

This works very well, but I do not always want to add all the translations I need, but load them asynchronously from the *.yml file.

And is there a way to translate the *.yml to the given format the MessageService is using?

 

[Svet]

Hi Michael,

I will provide some general information on this case.

The sole purpose of the MessageService is to provide a means by which the developer can provide the desired translations. 

The .yml files located in the following repository:

https://github.com/telerik/kendo-angular-messages/tree/develop/messages

contain annotated translation strings. Thus, currently there is no out-of-the-box option that allows to use the provided ready made translations by the MessageService. We are also considering supplying JS versions to address such scenarios.

Let me know in case I can provide any further information on this case or any other Kendo UI for Angular related topic.

Regards,
Svetlin
Progress Telerik