I have Countdown jQuery function inside my Angular2 *ngIf and it is not working. I don't have any error in my console.log, but the div is empty. It's just showing the title (h1). Here is my code: HTML
<div class="row" *ngIf="isDataAvailable"><h1>Dashboard</h1><div id="kodeCountdown"></div></div>
Angular2 TypeScript Component
ngOnInit() {
this.getData().then(() => this.isDataAvailable = true);
}
ngAfterViewInit() {
if ($('#kodeCountdown').length) {
var austDay = new Date();
austDay = new Date(2017, 3, 2, 12, 10);
jQuery('#kodeCountdown').countdown({ until: austDay });
jQuery('#year').text(austDay.getFullYear());
}
}
Result: Dashboard
I have Countdown jQuery function inside my Angular2 *ngIf and it is not working. I don't have any error in my console.log, but the div is empty. It's just showing the title (h1). Here is my code: HTML
<div class="row" *ngIf="isDataAvailable"><h1>Dashboard</h1><div id="kodeCountdown"></div></div>
Angular2 TypeScript Component
ngOnInit() {
this.getData().then(() => this.isDataAvailable = true);
}
ngAfterViewInit() {
if ($('#kodeCountdown').length) {
var austDay = new Date();
austDay = new Date(2017, 3, 2, 12, 10);
jQuery('#kodeCountdown').countdown({ until: austDay });
jQuery('#year').text(austDay.getFullYear());
}
}
Result: Dashboard
Share Improve this question edited Feb 4, 2017 at 4:52 Jose Carlos Santos Junior asked Feb 4, 2017 at 4:50 Jose Carlos Santos JuniorJose Carlos Santos Junior 872 silver badges8 bronze badges 2- not very familiar with A2 - but don't you need to reference the controller in the ngIf? eg - ngIf="sampleController.isDataAvailable".... – gavgrif Commented Feb 4, 2017 at 4:52
- Actually I have a title inside this tag as well and It's just showing the Title (h1) and not the countdown. – Jose Carlos Santos Junior Commented Feb 4, 2017 at 4:59
2 Answers
Reset to default 10The problem is that the ngAfterViewInit
method is only called once after the ponent's view has been initialized. Since the *ngIf
condition hasn't been evaluated to true
when ngAfterViewInit
is called, your #kodeCountdown
element isn't visible which means that your countdown function isn't initialized.
One way to resolve this would be to execute that logic inside of the ngAfterViewChecked
method (instead of the ngAfterViewInit
method ), because then your code will be executed after *ngIf
has been evaluated:
ngOnInit() {
this.getData().then(() => this.isDataAvailable = true);
}
ngAfterViewChecked() {
if ($('#kodeCountdown').length) {
var austDay = new Date();
austDay = new Date(2017, 3, 2, 12, 10);
jQuery('#kodeCountdown').countdown({
until: austDay
});
jQuery('#year').text(austDay.getFullYear());
}
}
However, since the ngAfterViewChecked
method is called after every check of the ponent's view, you will need to add additional logic to ensure that your countdown logic is only implemented once. You could simply set a flag to handle that:
private isCountdownInitialized: boolean;
// ...
ngAfterViewChecked() {
if (!this.isCountdownInitialized && $('#kodeCountdown').length) {
this.isCountdownInitialized = true;
// ...
}
}
A way around this is to set up jQuery code in a child ponent to free it of the parent's use of of ngIf restriction.