Hello Guys,
i am having a problem regarding multi language support for my angular application with Ignite Ui for Angular components.
I was wondering if general localization is supported for every component. For example the Datepicker component has a localization attribute for date formatting. Is there a way to change localization generally?
In my specific scenario i need to be able to toggle between german and english at runtime. English support is no problem for obvious reasons.
Is there a way and/or best practice to change the labels for all components to german?
I couldn't find anything in the documentation regarding this topic. I'm sure that i missed something.
Any help is greatly appreciated :-)
Hello,Thank you for contacting us.Currently, as you may have seen that Angular does not provide an official way to support localization for every component run time, and there is an issue in our GitHub repository, that address this problem, also you can see in the comments, that this problem is already addressed and in the official Angular Repository, so you can track the progress there.
But as a temporary solution what I can suggest you is to read the documentation of the Ignite UI for Angular components that you want to use and see if they provide way to set a value or define a custom template and to change it according the chosen language. A good idea is to store the labels and their translations in some json file, so you can extract them easily.If you need any further assistance, please contact us.
Hi,
thanks for your answer. The open issue in your GitHub repository is exactly what i am planning to do (changing the labels in the igx-grid filtering dialog). I think we just have to wait for the angular team in this specific case then.
But i have another question since we are talking about localization. I know that the igx-datepicker component provides a localization functionality and i know how that works, but is there a way to localize the integrated datepicker for a column with [dataType]="'date'" inside a igx-grid without defining a custom column template and putting an igx-datepicker inside it?
Hello,
As you may have seen in the Igx Grid API we do not provide any methods or properties in order for you to be able to change our default templates, also there is by default a date picker in the cell template only when the column data type is date and the cell is in edit mode. So If you want to change this behavior you should define a custom cell template which to be set as a default and/or editing template like the following:
<igx-column field="OrderDate" width="200px" [dataType]="'date'" [hasSummary]="true" [editable]="true"> <ng-template IgxCell> <igx-datePicker [outlet]="grid.outletDirective" [value]="cell.value" locale="ja-JP"></igx-datePicker> </ng-template>
<ng-template IgxCellEditor> <igx-datePicker [outlet]="grid.outletDirective" [value]="cell.value" locale="ja-JP"></igx-datePicker> </ng-template></igx-column>
If you need any further assistance, please contact us.
Thanks for your answer. As i expected that is exactly what i am doing right know. Good to know that it's the right way.