angulartranslationangular-i18n

How to translate text, that is hidden with ngif, on the initialization of the page?

I'm setting up i18n translation to implement multiple languages for my web application. In my web application I'm using Angular Material Steppers which have steps that are hidden until certain actions are completed. The steps are hidden with the ngIf directive. At first I had my text hardcoded in the HTML files and then it worked fine but now the text of the steps that are hidden do not get show when I show the step by setting ngIf to true.

However, the text does show when I don't hide my step with an ngIf on the initialization of the page. I also tried to use [hidden] instead of ngIf but mat-step doesn't support [hidden].

html before implementing i18n translation(working)

<mat-step [editable]="!done" *ngIf="companySelected" >
    <ng-template matStepLabel>contactinformation</ng-template>
</mat-step>

html after implementing

<mat-step [editable]="!done" *ngIf="companySelected" >
    <ng-template matStepLabel>{{ 'CONTACTGEGEVENS' | translate }}</ng-template>
</mat-step>

ts

companySelected = false;
onSelect(company: any) {

    this.company = company;
    this.newCompany = false;
    this.companySelected = true;
   this.nextTab();
  }

Any ideas how to keep using the i18n translation with the ngIf directive?

Solution

  • The problem was with my version of ngx translate since I am using Angular 5. The version I was using was for Angular 6 and higher. I did npm i @ngx-translate/core@9.1.1 to go to the right version and it worked. Not sure why it was working everywhere else though besides in the ngif's.