Translated text not presented on screen

@whereskeem wrote:

Using nx-translate I populate an array with text. This array gets populated during ionViewDidEnter(). On the HTML page I pass the array to a custom component called verify-form which passes the array to another custom component called progress-bar, within the progress-bar custom component I have a *ngFor loop to display the text in this array in a list but sometimes the list will show blank. I may have to refresh the page several times before the text appears.

parent page HTML

<ion-slides effect="fade">
			<ion-slide>
				<ion-card class="amc-card">
					<ion-card-header>
						<h1 text-wrap>
							{{'global.title' | translate}}
						</h1>
					</ion-card-header>
					<ion-card-content>
						<h2 text-wrap id="verify-title" class="custom-h2">
							{{title}}
						</h2>
						<verify-form [stages]="stages" (outputSubmitVerifyForm)="verifyForm($event)"></verify-form>
					</ion-card-content>
				</ion-card>
			</ion-slide>
			<ion-slide>
				<ion-card class="amc-card">
					<ion-card-header>
						<h1 text-wrap>
							{{'global.title' | translate}}
						</h1>
					</ion-card-header>
					<ion-card-content>
						<h2 text-wrap id="info-title" class="custom-h2">
							{{title}}
						</h2>
						<enter-info-form [name]="name" (outputSubmit)="enterInfoForm($event)"></enter-info-form>
					</ion-card-content>
				</ion-card>
			</ion-slide>
</ion-slides>

parent page TS

import { Component, ViewChild, ChangeDetectorRef } from '@angular/core';
import { IonicPage, NavController, NavParams, Content, Events, Slides } from 'ionic-angular';
import {Validators, FormBuilder } from '@angular/forms';
import { TranslateService } from '@ngx-translate/core';

@IonicPage()
@Component({
  selector: 'page-password-reset-initial',
  templateUrl: 'password-reset-initial.html',
})
export class PasswordResetInitialPage {
  stageOne:string;
  stageTwo:string;
  stageThree:string;
  stageFour:string;
  stages: any;
  @ViewChild(Content) content: Content;
  @ViewChild(Slides) slides: Slides;
  constructor(public translate: TranslateService) {
this.translate.get(['page.passwordResetInitial.progressBar.stages.forgotPassword','page.passwordResetInitial.progressBar.stages.verifyOne','page.passwordResetInitial.progressBar.stages.verifyTwo','page.passwordResetInitial.progressBar.stages.createPassword'])
    .subscribe((res:string) => {
      this.stageOne = res['page.passwordResetInitial.progressBar.stages.forgotPassword'],
      this.stageTwo = res['page.passwordResetInitial.progressBar.stages.verifyOne'],
      this.stageThree = res['page.passwordResetInitial.progressBar.stages.verifyTwo'],
      this.stageFour = res['page.passwordResetInitial.progressBar.stages.createPassword']
    });
  }

ionViewDidEnter(){
    this.stages = [
      [this.stageOne,'active'],
      [this.stageTwo,'future'],
      [this.stageThree,'future'],
      [this.stageFour,'future']
    ];
  }

enterInfoForm(event) {
}

verifyForm(event) {
}
}

verify-form custom component HTML

<progress-bar [stages]="stages" ></progress-bar>
<form [formGroup]="verifyForm" (ngSubmit)="submitVerifyForm()">
..........
</form>

verify-form custom component TS

import { Component, Input, Output, EventEmitter } from '@angular/core';
import {Validators, FormBuilder, FormGroup } from '@angular/forms';

@Component({
  selector: 'verify-form',
  templateUrl: 'verify-form.html'
})
export class VerifyFormComponent {

  @Input() stages:any;
  @Output() outputSubmitVerifyForm = new EventEmitter();
  verifyForm: FormGroup;

  constructor(public formBuilder: FormBuilder) {
    this.verifyForm = this.formBuilder.group({
      verify: ['', Validators.required]
    });
  }

  submitVerifyForm() {}
  }

}

progress-bar HTML

<div class="progress-bar-div">
	<ul class="progress-bar-ul" role="list" *ngFor="let stage of stages;let i = index">
		<li role="listitem" [class]="stage[1]">
			{{i+1}}. {{stage[0]}}
		</li>
	</ul>
</div>

progress-bar TS

import { Component, Input } from '@angular/core';

@Component({
  selector: 'progress-bar',
  templateUrl: 'progress-bar.html'
})
export class ProgressBarComponent {

  @Input() stages:any;

  constructor() {
  }
}

Posts: 1

Participants: 1

Read full topic