CODEWITHSUNDEEP
angularangular6ngx-translate
Ahmed Elkoussy
Ahmed Elkoussy

Reputation: 8568

ngx-translate in angular material input not showing the translation on initial load but shows it after that

I am using ngx-translate v10.02 in my Angular 6 app and using material 6.4

I have a very annoying issue, where the value is shown without translation on initial load, but then if I change language back & forth it will appear translated

My code is like this:

<mat-form-field>
  <input matInput placeholder="{{'IDType'| translate}}" disabled name="idType" 
  [(ngModel)]="this.dataService.idType" 
  value="{{this.dataService.idType | translate}}">
    </mat-form-field>

So on initial load it will show the variable itself without translation (i.e value of this.dataService.idType) but then it translates if I change language, I wonder what causes that.

Can anyone advise on what I have missed here?

Update:

All other translated elements are shown correctly on initial load except that one shown above, the difference I see is that this is the only element to have a variable to be translated, all others are static fields

That field is a variable that is changed between two values so I can't replace it with static value, but since it is translated after changing language I feel it is doable but a small thing is missing to make it work.

Upvotes: 4

Views: 3553

Answers (2)

Ahmed Elkoussy
Ahmed Elkoussy

Reputation: 8568

I finally found out the issue, I hope this helps someone else

The value that was loaded initially in the input field was of the 

[(ngModel)]="this.dataService.idType"

Then it was overwritten with the translated value when I change language, so the solution in my case was to remove the ngModel & depend only on the value field which has the translation & loads it correctly on initial load, so the code will be like this:

<mat-form-field>
  <input matInput placeholder="{{'IDType'| translate}}" disabled name="idType" 
  value="{{this.dataService.idType | translate}}">
</mat-form-field>

Upvotes: 1

Taranjit Kang
Taranjit Kang

Reputation: 2580

Are you sure there is an initial language set on load? In app.component or whatever you bootstrap. this.translateService.use('en') or whatever default language you want.

sucha as:

export class AppComponent {
param = {value: 'world'};

constructor(translate: TranslateService) {
    // this language will be used as a fallback when a translation isn't found in the current language
    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');
}

Upvotes: 1

Related Questions