Internationalization in Angular EJS1

Question

Hi,I'm trying to find an example of internationalization in Angular EJS1, but I haven't seen any.Could you provide an explanation/example of translating default/custom strings for gantt in Angular EJS1, please?Thanks

John Rajaram · Answer

Hi Oscar, 
Thank you for conatcting Syncfusion support. 
We have analyzed your requirement. The culture of the Gantt control can be defined by using locale property. In Gantt we can customize the User Interface (UI) based on a culture, specific to a country or region, in order to display regional data. For this localization support we need to refer the required culture files in app.module.ts file. Please refer the below code snippet. The following script file is used to localize the date Time object based upon the culture.  




[app.module.ts]  
 
import 'syncfusion-ej-global/i18n/ej.culture.fr-FR.min.js'; 
 
 
In Gantt we have the support to localize all the text in Gantt control by referring the following culture files in app.module.ts file. 




[app.module.ts] 
 
import 'syncfusion-ej-global/l10n/ej.localetexts.fr-FR.min.js'; 
 
In the above source file, we had replace the default text of the Gantt UI based on the culture. 
But In Gantt we can also customize the localized text by defining them locally in the sample. By using this support the user can set the localization text to the Gantt control based on the requirement. Please refer the below code snippet. 




[TS] 
constructor() { 
   ej.Gantt.Locale["fr-FR"] = { 
 
        //headerText to be displayed in TreeGrid 
 
        columnHeaderTexts: { 
 
            taskId: "Tâche Ia", 
 
            taskName: "Tâche Tâche", 
 
            startDate: "Démarrer Date", 
 
            endDate: "Fin Date", 
 
            resourceInfo: "Resources", 
 
            duration: "Durée", 
 
            status: "Progrès", 
 
            predecessor: "Prédécesseur", 
 
            baselineStartDate: "Baseline Démarrer Date", 
 
            baselineEndDate: "Baseline Fin Date" 
 
        }, 
 
        //string to display in dialog  
 
        editDialogTexts: { 
 
            addFormTitle: "Nouveau Tâche", 
 
            editFormTitle: "Modifier Tâche", 
 
            saveButton: "Sauver", 
 
            cancelButton: "Annuler" 
 
        }, 
 
    } 
 
Please find more details about the localization support here 
We have prepared the sample, in this sample we had set the localization for “fr-FR” culture please find the sample link below 
Link: http://www.syncfusion.com/downloads/support/forum/139879/ze/Localization_support-593296794 
Regards, 
John R

oscar bartolome · Answer

Hi,thanks, for the quick response. I have to translate also the labels in the tooltip and taskbar templates, any way to do this? I'm having trouble with them because they're in the index.html file.Other labels I have to translate are the ones in the tooltips of the custom controls in the toolbar, any recomendation to do it?Thanks a lot.

John Rajaram · Answer

Hi Oscar,  
We have checked your requirement, but we need some clarification on this. Can you please let us know which type of labels you need to translate in the taskbar and tooltip template? And also please provide the code snippet or screen shot regarding this. It will be very useful to provide the better solution. 
Regards,  
John R

oscar bartolome · Answer

Hi,for example (in the index.html):I have to translate 'Work Centers' and 'Operations' (the ones between the tags).And other one (in the x.component.ts file):customToolbarItems: [ { templateID: "#groupButtonsRefreshWc", tooltipText: "Refresh Data" },...I have to translate 'Refresh Data' (in the tooltipText property).Thanks.

John Rajaram · Answer

Hi Oscar, We have checked your code snippets. We suggest you to define the localized text manually in the tooltip, taskbar templates. Please refer the below code snippets. [index.html] [TS] constructor() { this.toolbarSettings = { showToolbar: true, customToolbarItems: [{ templateID: "#groupButtonsRefreshWc", tooltipText: "Actualiser les données" }, ], } Note: In the above code snippet, we had set the localization for “fr-FR” culture Please let us know if you require further assistance on this Regards, John R

oscar bartolome · Answer

Hi,I don't understand what you are trying to explain. Now our localized text is already defined manually, in English. I want to make a system to switch between English and Spanish and know how to translate this type of labels. Can you please provide an example of translating this type of labels in different languages?Thanks.

John Rajaram · Answer

Hi Oscar, We like to inform you that, in your sample you have declared the custom script templates and this is outside of the Gantt source. So we are unable to provide the Built-In localization support for those custom script templates. Because user may give any kind of texts in the script templates and it is not possible to provide localization support for those texts with Gantt source. Hence we suggested you to provide the localization text manually in the custom script template itself based on the culture. Here we have achieved your requirement with work around by changing the Script templates based on the culture selection. Please refer the below code snippet. //app.component.html // Template codes for English culture // Template codes for Spanish culture We have prepared the sample for your reference, please find the sample link below Link: http://www.syncfusion.com/downloads/support/forum/139879/ze/Localization_sample-1918616071 Regards, John R

oscar bartolome · Answer

Ok, thanks. And for the customToolbarItems tooltips? They are in the component.ts file:customToolbarItems: [   { templateID: "#groupButtonsRefreshWc", tooltipText: "Refresh Data" },...Thanks.

John Rajaram · Answer

Hi Oscar, Thanks for your update. We can provide the localization support to custom toolbar Tooltip text with below work around. Please refer the following code snippets. [index.html]

oscar bartolome · Answer

Ok, thanks. But this does not reload the tooltip text. The string is changed internally, but in the tooltip remains the old string. How can I reload the string of the tooltips text when changing the language?

Thanks.

oscar bartolome · Answer

Sorry, this is working fine. It was a mistake in my code.Thank you very much!

John Rajaram · Answer

Hi Oscar, 
Thank you for the update. Please let us know if you need further assistance on this. 
Regards, 
John R

oscar bartolome · Answer

Hi,now I'm having another problem. Once I make the translation:var obj = $("#wc_monitoring").data("ejGantt");obj.model.toolbarSettings.customToolbarItems[0].tooltipText = "Refresh Data"; obj.option( "locale", "en-EN");if then I refresh the gantt data:var obj = $("#wc_monitoring").data("ejGantt");            obj.option("dataSource", newData);I receive the next javascript error:SchedulerComponent.html:119 ERROR TypeError: Cannot use 'in' operator to search for 'modelChange' in null    at Object._trigger (ej.core.min.js:10)    at Object.setModel (ej.core.min.js:10)    at GanttComponent.push../node_modules/ej-angular2/src/ej/core.js.EJComponents.ngOnChanges (core.js:211)    at checkAndUpdateDirectiveDynamic (core.js:9054)    at checkAndUpdateNodeDynamic (core.js:10315)    at checkAndUpdateNode (core.js:10264)    at debugCheckAndUpdateNode (core.js:10894)    at debugCheckDirectivesFn (core.js:10854)    at Object.eval [as updateDirectives] (SchedulerComponent.html:169)    at Object.debugUpdateDirectives [as updateDirectives] (core.js:10846)View_SchedulerComponent_0 @ SchedulerComponent.html:119proxyClass @ compiler.js:10048push../node_modules/@angular/core/fesm5/core.js.DebugContext_.logError @ core.js:11098push../node_modules/@angular/core/fesm5/core.js.ErrorHandler.handleError @ core.js:1679(anonymous) @ core.js:4524push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:388push../node_modules/zone.js/dist/zone.js.Zone.run @ zone.js:138push../node_modules/@angular/core/fesm5/core.js.NgZone.runOutsideAngular @ core.js:3719push../node_modules/@angular/core/fesm5/core.js.ApplicationRef.tick @ core.js:4524(anonymous) @ core.js:4409push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:388onInvoke @ core.js:3760push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:387push../node_modules/zone.js/dist/zone.js.Zone.run @ zone.js:138push../node_modules/@angular/core/fesm5/core.js.NgZone.run @ core.js:3674next @ core.js:4409schedulerFn @ core.js:3491push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub @ Subscriber.js:195push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next @ Subscriber.js:133push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next @ Subscriber.js:77push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next @ Subscriber.js:54push../node_modules/rxjs/_esm5/internal/Subject.js.Subject.next @ Subject.js:47push../node_modules/@angular/core/fesm5/core.js.EventEmitter.emit @ core.js:3483checkStable @ core.js:3729onLeave @ core.js:3796onInvokeTask @ core.js:3754push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:420push../node_modules/zone.js/dist/zone.js.Zone.runTask @ zone.js:188push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask @ zone.js:496invokeTask @ zone.js:1540globalZoneAwareCallback @ zone.js:1566SchedulerComponent.html:119 ERROR CONTEXT DebugContext_ {view: {…}, nodeIndex: 9, nodeDef: {…}, elDef: {…}, elView: {…}}Any idea why?Thanks

John Rajaram · Answer

Hi Oscar, Sorry for the inconvenience caused. We have analyzed your reported issue and we request you to use the “setModel” support alone to change the localization for the tooltip labels and customToolbarItems tooltip text, instead of “reRenderChart” method. Please refer the below code snippets. //app.component.html [index.html] // Template codes for English culture // Template codes for Spanish culture function ChangedCulture() { var obj = $("#GanttControl").ejGantt("instance"); if (document.getElementById("selMode").value == 2) { obj.model.taskbarTooltipTemplateId = "tooltipTemplateMX"; obj.model.toolbarSettings.customToolbarItems[0].tooltipText = "Actualizar datos"; obj.setModel({ locale: "es-ES" }); } else { obj.model.taskbarTooltipTemplateId = "tooltipTemplateES"; obj.model.toolbarSettings.customToolbarItems[0].tooltipText = "Refresh Data"; obj.setModel({ locale: "en-US" }); } } //app.module.ts import 'syncfusion-ej-global/i18n/ej.culture.es-ES.min.js'; import 'syncfusion-ej-global/l10n/ej.localetexts.es-ES.min.js'; import 'syncfusion-ej-global/i18n/ej.culture.en-US.min.js'; import 'syncfusion-ej-global/l10n/ej.localetexts.en-US.min.js'; We have prepared the sample for your reference, please find the sample link below Link: http://www.syncfusion.com/downloads/support/forum/139879/ze/Localization_issue2026869771 Please let us know if you require further assistance on this Regards, John R

oscar bartolome · Answer

Hi,I don't execute the refreshing code next to the change localization code. This code is for a button that refreshes the data in the gant:var obj = $("#wc_monitoring").data("ejGantt");obj.setModel({dataSource: newData});And this one is for the change localization dropdown:var obj = $("#wc_monitoring").data("ejGantt");obj.model.toolbarSettings.customToolbarItems[0].tooltipText = this.translations["REFRESHD"]; obj.setModel( {locale: language} );The error appears once I've executed the change localization code, then if I push the refreshing button, the previous explained error appears. And using 'setModel' too.Could you please try an example that changes the localization, and then try to refresh the gantt data.Thanks.

John Rajaram · Answer

Hi Oscar, 
We have checked as per suggestion, but we are unable to reproduce the reported issue in our end. We have prepared the sample, in this sample we had refresh the Gantt with new data source after changing the localization for labels and the sample is working fine without any issues. Please find the sample link below 
Link: http://www.syncfusion.com/downloads/support/forum/139879/ze/Localization_issue-711306701 
Regards, 
John R