Hello, I have a question. I am trying to implement a feature in my application where the page automatically reloads every 1 minute if a checkbox is selected. If the checkbox is not selected, the automatic page update should be disabled. I have been attempting to achieve this using JavaScript and the change event, but I am facing difficulties making the page reload automatically with setTimeout. Is there another way to accomplish this using observables? I am still relatively new to Angular.
Below is the code I have implemented so far:
HTML Code
<mat-checkbox (change)="checkCheckBoxvalue($event)">Check me!</mat-checkbox>
TypeScript Code
checkCheckBoxvalue(event){
console.log(event.checked)
if (event.checked){
this.com=true
}
else{
this.com=false
}
if (this.com) {
console.log("The checkbox is active")
setInterval(function(){
// ... function to reload my page
}, 1000);
}
else {
console.log("The checbox is not active")
}
UPDATE
To get the desired result, an arrow function must be added:
loadpaginator(): any {
this.dataSource.loadData(
this.id_interface ? this.id_interface.toString() : undefined,
this.EquipoOrigenValue ? this.EquipoOrigenValue : undefined,
this.LocalidadOrigenValue ? this.LocalidadOrigenValue : undefined,
this.VendedorValue ? this.VendedorValue : undefined,
this.id_prtg ? this.id_prtg.toString() : undefined,
this.CategoriaOrigenValue ? this.CategoriaOrigenValue : undefined,
this.EquipoDestinoValue ? this.EquipoDestinoValue : undefined,
this.OspfOperValue ? this.OspfOperValue : undefined,
this.OspfAdminValue ? this.OspfAdminValue : undefined,
this.ServicioValue ? this.ServicioValue : undefined,
this.TipoOrigenValue ? this.TipoOrigenValue : undefined,
this.PuertoOrigenValue ? this.PuertoOrigenValue : undefined,
this.paginator.pageSize,
(this.paginator.pageIndex + 1)
);
}
With this implementation, my table gets updated periodically depending on the specified interval in the setInterval() function:
.......
if (event) {
console.log("The checkbox is active");
this.timeout = setInterval(() => {
this.loadpaginator()
}, 5000);
}
.....