4

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?

Sam Bellekens
  • 83
  • 8
  • when companySelected changed? show us the ts file – Masoud Bimmar May 10 '19 at 15:03
  • @MasoudBimar I added the ts function where companyselected was set to true. When the strings were hardcoded it worked fine. It's when I started rewriting it with for translation I started having this problem. I'll add this to the question though my bad. – Sam Bellekens May 10 '19 at 15:41

1 Answers1

0

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.

Sam Bellekens
  • 83
  • 8