Multilingual or i18n support

[john--]

Hi. First or all, nice work.

I don't see a way to support a multilingual site using this package. I mean, I could probably set an alias for every route and then set that on every page to the translated value, but it doesn't seem very elegant.

Is there a better way to approach this? Thanks.

[udayvunnam]

Hey @john-- Thank you. I would like to add i18n support.
So, you want to specify breadcrumbs during route declaration (or even dynamically at some place), and be able to change the labels whenever you change language settings by some means.

There are couple of solutions like Angular default i18n, @ngx-translate , @ngneat/transloco. Which one are you using?

I will try to add this ability in better way.

[john--]

Hi, yes exactly :)
I personally use ngx-translate with a touch of customization. I wonder if you could even just have the option for the template to be overridable so someone could customize what gets rendered. For example instead of
{{ breadcrumb.label }}
They could override it with
{{ breadcrumb.label | translate }}
I think simply being able to send the label through a pipe could be pretty useful to people and offer a lot of customization. Thoughts?

[udayvunnam]

Thats a good idea 💡 . If i could let the user wrap the breadcrumb label with a custom pipe of choice (translate, transloco or even initCap) it could be useful. Let me see how it works.

[john--]

Sounds like a plan! Thanks!

[udayvunnam]

@john-- Good news. I have added this ability.

With latest xng-breadcrumb release, you can provide custom template for breadcrumb, where you can pipe or do whatever you want :)

With ngx-translate you can use like -

<xng-breadcrumb>
  <ng-container *xngBreadcrumbItem="let breadcrumb">
    <ng-container>{{ breadcrumb | translate }}</ng-container>
  </ng-container>
</xng-breadcrumb>

Do check the README and update the library version.
[email protected](Angular 6, 7) or [email protected] (Angular 8+)

[john--]

@udayvunnam

You are a wonderful person. Thanks so much!

[udayvunnam]

Thank you! 😊 I will close the issue, since it's resolved

[iabhishek3]

@udayvunnam Nice work Man.This is really clean solution .