ionic-team / ionic-starter-super

The Ionic 2 Super Starter 🎮

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

ngx-translate json file has new format

peterennis opened this issue · comments

Here: https://embed.plnkr.co/01UjWY3TKfP6pgwXKuEa/
is a working example
capture066

Here is my local test:
capture065

The new json file format allows organization by page category and looks like this:

{
    "HOME": {
      "HOME": "استهلال"
    },
    "LEARN": {
      "LEARN": "AR LEARN"
    },
    "CONTACT": {
      "CONTACT": "اتصال",
      "FOLLOW_US_TW": "تابعونا على تويتر"
    },
    "SETTINGS": {
      "TITLE": "AR Settings",
      "SELECT_LANGUAGE": "اختر لغتك",
      "LANGUAGES": "اللغات",
      "CANCEL": "إلغاء",
      "MYCOM": "AR {{ myCom }}",
      "MYAPP": "AR {{ myApp }}",
      "HI": "مرحبا {{ name }}"
    },
    "TABS": {
      "TABS": "AR TABS",
      "HOME": "استهلال",
      "LEARN": "AR LEARN",
      "CONTACT": "اتصال"
    },
    "TESTING": {
      "TESTING": "AR TESTING"
    },
    "THEMES": {
      "THEMES": "AR THEMES"
    },    
    "MENU": {
      "MENU": "AR MENU"
    }
}

It is called like this:

<ion-header>
  <ion-navbar color="secondary">
    <button ion-button menuToggle> 
      <ion-icon name="menu"></ion-icon> 
    </button>
    <ion-title>{{ 'SETTINGS.TITLE' | translate }}</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>

  <ion-list no-lines>
    <ion-item>
      <ion-label>
        {{ 'SETTINGS.SELECT_LANGUAGE' | translate }}
      </ion-label>
      <ion-select [(ngModel)]="languageSelected" (ionChange)='setLanguage()' [cancelText]="'CANCEL' | translate">
        <ion-option *ngFor="let item of languages" [value]="item.code">{{ item.name }}</ion-option>
      </ion-select>
    </ion-item>
  </ion-list>

This will affect #95 and other related issues.

How do I call the translation form in ionic-super from the app?
I can then have a go at formatting a translation file to see if it works
and update the PR.

isn't Super Starter using ng2-translate rather than ngx-translate though?

ng2-translate is Angular 2, ngx-translate is Angular 4+ and Ionic 3+
The name is changed to deal with version break and semver from 5.0.0 to 6.0.1
ng2-translate 5 will fail with npm complaints for the ionic upgrade
Ref: #95 and other items that are related to this.