Ng2-translate problem.."Cannot read property 'currentLang' of undefined"


#1

here is my code

app.module.ts

import { HttpModule, Http } from '@angular/http';
import { TranslateModule, TranslateLoader, TranslateStaticLoader } from 'ng2-translate';


export function createTranslateLoader(http: Http) {
  return new TranslateStaticLoader(http, './assets/i18n', '.json');
}


 imports: [
     HttpModule,
    TranslateModule.forRoot({
      provide: TranslateLoader,
      useFactory: (createTranslateLoader),
      deps: [Http]
    }),

app.component.ts

import { TranslateService } from 'ng2-translate';


@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  rootPage = HomePage;

  constructor(platform: Platform, translate: TranslateService) {
  
    platform.ready().then(() => {
      
      //jj
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      StatusBar.styleDefault();
      Splashscreen.hide();

      translate.setDefaultLang('en');
      // the lang to use, if the lang isn't available, it will use the current loader to get them
      translate.use('en');
    });
  }
}

home.ts

import { TranslateService } from "ng2-translate";
//var declared
  langs = ['en', 'fr', 'es'];

home.html

 <label>
    {{ 'HOME.SELECT' | translate }}
    <select #langSelect (change)="translate.use(langSelect.value)">
      <option *ngFor="let lang of langs" [value]="lang" [selected]="lang === translate.currentLang">{{ lang }}</option>
    </select>
  </label>

in home.html i am getting error
"Cannot read property ‘currentLang’ of undefined"
i am getting error in home. html in this line=> [selected]=“lang === translate.currentLang”


#2

got it working now as i forget to declare TranslateService in home.ts constructor


#3

It cannot working in my app after open app for first time. Its my code below:

 <ion-navbar>
                <ion-title>{{ 'APP.BIGTITLE' | translate }}</ion-title>     
 <ion-select #langSelect  class="langselect" (ionChange)="translate.use(langSelect.value)" interface="popover" >
      <ion-option *ngFor="let lang of langs" [value]="lang"  [selected]="lang === translate.currentLang">{{lang}}</ion-option>
    </ion-select>
  </ion-navbar>

How I can fix it?