I18n complete page

Ionic Framework ionic-v3
1

Hi,

I’m creating a complete i18n App.

With the ng2-translate package I have developed the majority of pages. The problem is when I want to have different pages depending on the language such as legal texts depending on the language.

The solution I have used is to create 3 components called legal-es, legal-fr and legal-en. In each component I have added the corresponding texts, images and links.

In the legal page I added the three components and using a language variable I show one component or another.

<h1>Legal
  <legal-es *ngIf="my_lang=='es'"></legal-es>
  <legal-en *ngIf="my_lang=='en'"></legal-en>
  <legal-fr *ngIf="my_lang=='fr'"></legal-fr>
</h1>

I have searched how to load templates dynamically but I have not found a solution. Something like:
@Component({
selector: ‘page-legal’,
templateUrl: ‘legal.html’
})

or a partial page like Ionic 1.

Is there a more elegant alternative? Some code is welcomed.

Best regards

2

Just an off-the-top-of-my-head idea:

Have a single page that uses translations from ng2-translate

When you enter the page pass the language you want to display as a parameter and set the language in ng2-translate to that. Cache the current language, and set the current language back on leave.

If that affects too much (like navigation or something) I think you can get language strings for a specific language via the api with getTranslation
https://www.npmjs.com/package/ng2-translate#api

3

Thanks. The problem is I want to show a complete HTML page in a single language not a word or phrases like a form.

4

I don’t follow why that would be a problem with ng2-translate - there’s no real limit to the size of the text you’re translating that I’m aware of…