https://github.com/mdecker-mobilecomputing/ionic_informatikersprueche

Ionic-App to demonstrate i18n (translation of texts to be displayed to end user)
https://github.com/mdecker-mobilecomputing/ionic_informatikersprueche

angular github-actions i18n ionic

Last synced: 6 days ago
JSON representation

Ionic-App to demonstrate i18n (translation of texts to be displayed to end user)

• Host: GitHub
• URL: https://github.com/mdecker-mobilecomputing/ionic_informatikersprueche
• Owner: MDecker-MobileComputing
• License: bsd-3-clause
• Created: 2021-05-02T11:28:35.000Z (over 3 years ago)
• Default Branch: master
• Last Pushed: 2024-05-08T10:31:53.000Z (6 months ago)
• Last Synced: 2024-05-09T10:39:45.373Z (6 months ago)
• Topics: angular, github-actions, i18n, ionic
• Language: TypeScript
• Homepage:
• Size: 3.03 MB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
# Ionic app to demonstrate translation of UI texts #




This repository contains an Angular-based Ionic app that shows some citations from the area of computer since in

[ion-slides](https://ionicframework.com/docs/api/slides) elements.

These citations and the few other texts in the app are translated to German and Englisch, whereas the latter is the default language.

For the translatable texts Angular's translation library [ngx-translate](https://www.npmjs.com/package/@ngx-translate/core) is used.




----

## Screenshots ##




![Screenshot 1](screenshot_1.png)  ![Screenshot 2](screenshot_2.png)

![Screenshot 3](screenshot_3.png)  ![Screenshot 4](screenshot_4.png)

![Screenshot 5](screenshot_5.png)




----

## Implementation Details ##




The English texts can be found in file [src/assets/i18n/en.json](src/assets/i18n/en.json),

the German  texts can be found in file [src/assets/i18n/de.json](src/assets/i18n/de.json).

The translation was implemented according to the following article: https://phrase.com/blog/posts/localizing-ionic-applications-with-ngx-translate/

First the following NPM modules have to be added to the Ionic project:

```

npm install @ngx-translate/core @ngx-translate/http-loader --save

```

To enable translation in the Ionic app some changes are needed in files [src/app/app.component.ts ](src/app/app.component.ts) and [src/app/app.component.ts](src/app/app.component.ts) for setting the default lanuage (`ngx-translate` is for Angular, i.e. not Ionic-specific).

In HTML files you can reference a translated text using the `translate` pipe:

```

{{ "key_for_text" | translate }}

```

To enable the `translate` pipeline in a HTML file class `TranslateModule` must be exported in the corresponding `.module.ts` file for each page in which this pipe is to be used, for example file [src/app/home/home.module.ts](src/app/home/home.module.ts).

Here is another article describing how to have translatable texts with parameters: https://vitamindev.com/angular/how-to-use-parameters-in-ngx-translate/




----

## License ##




See the [LICENSE file](LICENSE.md) for license rights and limitations (BSD 3-Clause License) for the files in this repository.