Angular: How to refresh a div inside component on assets file modification

Question

I have an external JSON file stored in assets folder of the angular app. This config is used to show an image in a component based on the expiration date provided in JSON. I've developed the logic to show the image by fetching data from the file.

Problem:

After deploying the prod build in server, if I change the content in the JSON (inside assets), the view automatically doesn't refresh. So I created a setInterval function to call the API after every N seconds. This works somewhat perfectly The issue that appears here is on first load sometimes the setInterval doesn't get triggered or sometimes if I change the value in JSON, the interval function doesn't work. This issue doesn't happen in DEV server as because when changing data in assets the angular server refreshes as a whole.

Code I wrote for interval:

time: NodeJS.Timer;

ngOnInit() { this.getPassDetails() }

ngOnDestroy() { this.time = null }

private getPassDetails() {
  this.time = setInterval(() => this._ymcaform.fetchPassDetails().subscribe(response => this.CONFIG = response), 1000);
}

What's the problem here? Is there any other way to refresh UI when JSON inside assets changes?

Answer 1

Okay try doing this one thing in your component. Add changeDetection in your component.ts file.

Like this:

@Component({
  // other data
  changeDetection: ChangeDetectionStrategy.Default
}) 

See how this works. This will detect the input changes and will trigger change detection.