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() {
}
}
