Incorporating a Refresh Functionality on a page that offers users two options: Refresh Buttons
Clicking the Refresh button to refresh the page (straightforward)
Allowing users to set a Refresh Frequency (option to automatically refresh the page at specific intervals) Set Interval Refresh
The different intervals, displayed in the image, are stored in an object like this:
timer: RefreshTimer[] = [
{value: 15000, time: '15 Sec'},
{value: 30000, time: '30 Sec'},
{value: 45000, time: '45 Sec'},
{value: 100000, time: '1 min'},
{value: null, time: 'Cancel'}];
I am utilizing setInterval() to call the refresh() method as shown below:
refresh() {
this.router.navigateByUrl('./views/refresh/', { skipLocationChange: true }).then(() => {
console.log(decodeURI(this.location.path()));
this.router.navigate([decodeURI(this.location.path())]);
});}
refreshFrequency(time) {
if(time === null){
this.counter = 110;
}
this.progressInterval = setInterval(() => {
this.counter += 10;
this.refresh();
console.log('this.counter', this.counter);
if(this.counter >= 100){
clearInterval(this.progressInterval);
console.log('cleaned and finished');
}
},time);
}
Invoking setInterval() as follows:
<mat-form-field class="timer" style="width: 10px;">
<i class="far fa-clock"></i>
<mat-select class="alarm-dropdown" trigger="alarmTrigger" #alarmSelect>
<mat-option *ngFor="let time of timer"
(click)="refreshFrequency(time.value)"
[value]="time.value">
{{time.time}}
</mat-option>
</mat-select>
</mat-form-field>
The current behavior is that clearInterval() does not work after selecting "Cancel" from the dropdown.
1. Step 1
2. Step 2
3. Step 3
Thank you for the assistance.