Ticket T542902
Visible to All Users

How to display localized texts using Angular i18n

created 8 years ago

Hi
     How can i display localize texts with in the component like title on dxo-popup or caption on dxi-column

C#
<dxo-popup title="Chart Of Account Info"> </dxo-popup> <dxi-column dataField="glCod" caption="GL Code"></dxi-column>

before i have use l (lower case 'L') function comes from AppComponentBase to binding localize texts and its work with my angular 4  <h3>{{l("ChartOfAccount")}} </h3>

Thank you

Answers approved by DevExpress Support

created 8 years ago

Hello Kwan,

If you need to localize a custom validation string, Angular has built-in support for this. See the Internationalization (i18n) help topic. But, there are also libraries like @ngx-translate, which may be simpler to use. We use it in our GitHub - GoshaFighten/dx-ngx-application sample project. We tell this library to load a custom translation via an HTTP request at the https://github.com/GoshaFighten/dx-ngx-application/blob/master/src/app/app-localize.module.ts#L27 line. Then, we use this library as a pipe at the https://github.com/GoshaFighten/dx-ngx-application/blob/master/src/app/components/home/home.component.html#L2 line:

HTML
<dxi-column dataField="orderID" [caption]="'GridCaptions.OrderId' | translate"></dxi-column>

I suggest you download our project to test how it works. Let me know if you have further questions.

    Comments (2)
    KG KG
    Kalin Georgiev 3 years ago

      Hello I am also using ngx-translate in a project of ours. We use HTTP Loader for getting all the res strings from our DB. I have a big issue with DevExtreme widgets and ngx-translate. So Before we start using devextreme we used ngx-table for the grids and angular material. When we change the language there was absolutely no problem. But now we are changing one by one all components to use devextreme and in forms and grids with more than 30 res strings, the translations last fo 4-5 seconds before be re-rendered. Can you help we this issue?

      DevExpress Support Team 3 years ago

        Hello Kalin,

        I created a separate ticket on your behalf: T1068989: Localization - DevExtreme components are re-rendered when using ngx-translate for localization. We placed it in our processing queue and will process it shortly.

        Disclaimer: The information provided on DevExpress.com and affiliated web properties (including the DevExpress Support Center) is provided "as is" without warranty of any kind. Developer Express Inc disclaims all warranties, either express or implied, including the warranties of merchantability and fitness for a particular purpose. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.

        Confidential Information: Developer Express Inc does not wish to receive, will not act to procure, nor will it solicit, confidential or proprietary materials and information from you through the DevExpress Support Center or its web properties. Any and all materials or information divulged during chats, email communications, online discussions, Support Center tickets, or made available to Developer Express Inc in any manner will be deemed NOT to be confidential by Developer Express Inc. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.