Angular and PrimeNG Internationalization(i18n) support using ngx-translate

[sudheer]

Recently I saw many questions(especially in community forums) related to internationalization implementation in Angular/PrimeNG libraries. So I created a blog post on how to implement through ngx-translate. Later I will create another blog post on official Angular's i18n tools.

Blog post: http://sudheerjonna.com/blog/2017/06/26 ... translate/
Github URL: https://github.com/sudheerj/angular-pri ... xtranslate

Any comments are welcome to make it more useful.

[rafa-as]

Hi sudheer!

Your information its very useful but in the pButton component you are not using the translation pipe and for me doesn't works.

You can confirm that not works in the pButton case?


Thank you!

[rafa-as]

UPDATE: The github repository have some issues about the pButton error. On the 5.1.0 version is fixed.

https://github.com/primefaces/primeng/issues/4548

[juangui]

When I apply new translations and the current page has primeng components with translations, i.e. a p-table, the translations are not updated unless I force a navigation or a page reload.

For instance, if my template has:

<h1>{{ 'HOME.Summary' | translate }}</h1>
<p-dataTable [value]="employees" [rowStyleClass]="lookupRowStyleClass">
<p-header>{{'List of employees' | translate}}</p-header>
<p-column field="id" header="{{'EmployeeID' | translate}}"></p-column>
<p-column field="firstname" header="{{'FirstName' | translate}}"></p-column>
<p-column field="lastname" header="{{'LastName' | translate}}"></p-column>
<p-column field="description" header="{{'Description' | translate}}"></p-column>
<p-column field="gender" header="{{'Gender' | translate}}"></p-column>
<p-column field="grade" header="{{'Grade' | translate}}"></p-column>
<p-column field="experience" header="{{'Experience' | translate}}"></p-column>
<p-footer>{{'This is a list of employees registered in the last week' | translate}}</p-footer>
</p-dataTable>

... only the <h1> tag is translated, while the p-column headers don't.

Is there a fix for this?

[dSebastien]

I've published a related article, explaining how to translate PrimeNG's menu component using ngx-translate: https://medium.com/@dSebastien/dynamica ... 758eb5aee0

Unfortunately the approach is not very flexible compared to what one can do using Angular Material's mat-menu component (which uses content projection).