I am currently working on a timer countdown component and have the following code:
@Component({
moduleId: module.id,
selector: 'time-countdown',
template: `<StackLayout>
<Label text="{{timeRemaining}}" ></Label>
<StackLayout>`
})
export class TimeCountdownComponent implements OnInit {
@Input() periodDetails :any;
private timeRemaining :string = "";
private units :string = "";
constructor( private ps: PeriodService) {}
ngOnInit() {
this.periodDetails.nextPeriodStartDate = this.ps.getNextPeriod(this.periodDetails);
console.log("TIME COUNTDOWN: init => " + this.periodDetails.nextPeriodStartDate.toString() )
setInterval(() => {
this.getTimeRemaining()
}, 1000)
}
getTimeRemaining(){
let trObject = this.ps.getTimeRemaining(this.periodDetails.nextPeriodStartDate);
this.timeRemaining = trObject.time;
this.units = (!trObject.units) ? "days": "";
console.log("TIME COUNTDOWN: Tick => " + this.timeRemaining )
}
}
The issue I'm facing is that while the correct units and time remaining are displayed in the console, they are not showing up in the label. I have tried using Observable.timer().subscribe, Observable.interval().subscribe, and changing the template to "[text]='timeRemaining'", but none of these solutions seem to work.
This particular component is added dynamically by the user (as discussed in this post). Interestingly, when I click on the "+" button to add a new timer, the time briefly appears for a fraction of a second before disappearing again. Can anyone provide insights into what might be causing this or how I can troubleshoot it?
EDIT: After conducting extensive research and testing, I have found an interim solution. When I use this component as the root component of the app, the following code works:
@Component({
moduleId: module.id,
selector: 'time-countdown',
template: `
<StackLayout>
<Label [text]="timeRemaining | async" ></Label>
<StackLayout>
`
})
export class TimeCountdownComponent implements OnInit {
@Input() periodDetails: any;
private timeRemaining: any;
ngOnInit(){
this.periodDetails.nextPeriodStartDate = this.ps.getNextPeriod(this.periodDetails);
this.timeRemaining = new Observable<string>((observer: Subscriber<string>) => {
setInterval(() => observer.next(this.getTimeRemaining().time),1000);
});
}
constructor(private ps: PeriodService ) {}
getTimeRemaining() {
let tr = this.ps.getTimeRemaining(this.periodDetails.nextPeriodStartDate);
console.log(tr.time);
return tr;
}
}
However, if I nest this component into another component, it fails to display the time remaining in the template even though it is logged in the console. Can someone help me understand what might be causing this discrepancy?