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

• javascript
• jquery
• angular
• typescript

• 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 2

The 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.