Wijmo 5 Angular 2 Globalization and Localization, Rich Text Editor

Posted by: feniksreborn on 14 September 2017, 3:07 am EST

  • Posted 14 September 2017, 3:07 am EST

    Hi,

    What is the best way to use wijmo 5 Globalization and Localization in Angular 2, typescript (visual studio 2015)?

    For example I wan to choose my language in login page, after successfully login action, I want to show all controls in German.

    Is this possible with wijmo 5? Do you have some example for this request?

    Another question: Does wijmo 5 have Rich Text Editor or similar control that works wit rich text?

    Best regards,

    M

  • Posted 14 September 2017, 3:07 am EST

    Hello,

    Please refer to the attached sample for globalization. You need to include culture files in your each page depends on language selection.

    We are sorry, currently, we do not have Rich Text Editor for Wijmo 5 control.

    Thanks,

    Manish Kumar Gupta

    2017/06/Explorer.zip

  • Posted 14 September 2017, 3:07 am EST

    Hi,

    this is very broad example. To be honest I don’t know what are your source files and what is the example, you have GlobalizationModule. But you never used it…

    Also you have InputBaseCmp abstract class InputBaseCmp and pipe GlbzPipe. Do I need also this classes in my project. I am little confused with this example.

    Can you pleas make example withe one component, say calendar and one combobox withe languages. When I change combobox value, the translation (after reload page or not) is also changed in calendar component. I need to see implementation of GlobalizationModule (where it is registered, what i need to declare and stuff…)

    Than you.

    Best regards,

    M

  • Posted 14 September 2017, 3:07 am EST

    Hi,

    We are working on your query and we will update you soon.

    Thanks,

    Manish Kumar Gupta

  • Posted 14 September 2017, 3:07 am EST

    Hi,

    Any news for this query?

    Best regards,

    M

  • Posted 14 September 2017, 3:07 am EST

    Hello,

    I am really sorry for the inconvenience caused due to delay. I will provide a separate sample within next week.

    Please accept my apologies.

    Thanks,

    Manish Kumar Gupta

  • Posted 14 September 2017, 3:07 am EST

    Hi,

    Please accept apologies for the delay in response.

    We created a sample that allows setting culture at login and displays the Wijmo controls with defined culture.

    Please find the attached sample here.

    PS: Please use admin as username and password for the attached sample.

    Thanks,

    Manish Kumar Gupta

    2017/07/Globalization_on_login.zip

  • Posted 14 September 2017, 3:07 am EST

    HI,

    Sorry for not replying sooner. I can not open login page, there is some errors in redirection, also tou dont have index page, it’s blank…

    Can you please see what is wrong? Txn

    Best regards,

    M

  • Posted 14 September 2017, 3:07 am EST

    Hi,

    We apologize for the delayed response.

    I am able to replicate the issue at our end. I am really confused :confused: because I had attached working sample.

    I need to rework on this. Please find the updated sample here.

    Thanks,

    Manish Kumar Gupta

    2017/07/Globalization_updated.zip

  • Posted 14 September 2017, 3:07 am EST

    Hi,

    Sorry for not replying sooner. Still the same problem with code. Image below…

    Also I see that you use some kind of JQuery for loading vendors, and you have local variable i18n, hmmmm very confusing answer.

    import * as wjCore from “wijmo/wijmo”;

    export class Globalization {

    protected _culture: string;

    i18n: any;

    constructor() {

        this._culture = "en";
        this._loadCultureInfo();
    }
    get culture(): string {
        return this._culture;
    }
    set culture(value: string) {
        if (this._culture != value) {
            this._culture = value;
            this._loadCultureInfo();
        }
    }
    
    protected _loadCultureInfo() {       
        var self = this;     
        $.ajax({
            url: 'scripts/vendor/wijmo.culture.' + self.culture + '.js',
            dataType: 'script',
            success: function (data) {
                // culture applied, now load translations
                $.ajax({
                    url: 'translations/strings.' + self.culture + '.js',
                    dataType: 'json',
                    async: false,
                    success: function (data) {
                        console.log(JSON.stringify(data));
                        self.i18n = data;
                        // update controls to reflect changes
                        wjCore.Control.invalidateAll();
                    }
                });
            },
        });
    }
    

    }

    In angular 2 - Internationalization is mark with (i18n), and you use this in HTML elements to mark the words necessary for translation. There is no need for local variable. Why do you need this local variable i18n? Maybe my main question is: If I load vendors and translation, is this enough for Wijmo controls to change language nad globalization or not?

    Best regards,

    M

  • Posted 14 September 2017, 3:07 am EST

    Hello,

    If you can load vendor and add to script as jQuery is doing here, it may be. If the translation can be assigned to the i18n, it should work (cross fingered).

    Regards,

    Manish Kumar Gupta

  • Posted 13 February 2018, 12:19 am EST

    I made a small sample that might be useful.

    It uses a dynamic script block to load whatever Wijmo culture file you want.

    You would probably use this on your top-level component so all its child components inherit the selected culture:

    wijmo-culture.zip

    I hope this is useful.

Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels