CODEWITHSUNDEEP
angular7ionic4
pixel draw solutions
pixel draw solutions

Reputation: 171

Reload current page in Ionic 4, angular 7

I'm trying to build a fallback for those that are running the APP with no Internet connection. In mypage.ts, i have the following:

import { Component, OnInit } from '@angular/core';
import { Network } from '@ionic-native/network/ngx';
@Component({
  selector: 'app-contacto',
  templateUrl: './contacto.page.html',
  styleUrls: ['./contacto.page.scss'],
})
export class ContactoPage implements OnInit {
  constructor(private network: Network) {
        // watch network for a connection
        this.network.onConnect().subscribe(() => {
          document.getElementById("netOFF").style.display="none";
         // document.getElementById("netRel").style.display="none";
          console.log('Internet ON');
        });
         // watch network for a disconnection
         this.network.onDisconnect().subscribe(() => {
          document.getElementById("netON").style.display="none";
          console.log('Sin conexión a Internet');
        });
        function reload() {
          this.ionViewWillEnter();
      }
      }
  ngOnInit() { }
}

My html file looks like this:

<ion-content>
    <div id="netON">
        <iframe src="https://www.domain.es/" style="top:57px; left:0; bottom:0; right:0; width:100%; height:100%; border:none; margin:0; padding: 0; overflow:hidden; z-index:999999;"></iframe>
      </div>
<div id="netOFF"><ion-img src="/assets/img/net.png" style="display:block; width:100%; height:100%; object-fit: cover; z-index:999999;"></ion-img>
</div>
  </ion-content>
  <ion-footer id="netRel" (click)="reload()">
      <ion-toolbar color="danger">
          <ion-icon name="exit" slot="start"></ion-icon>
        <ion-title>Reintentar</ion-title>
      </ion-toolbar>
    </ion-footer>

So, the contact form is an iframe, if the phone doesn't have an Internet connection, netON (the iFrame), will be hidden, if the phone have an Internet connection, the Iframe will be shown.

Additionally, i have a button (click)="reload()", for those that had no connection and they're back Online in order to reload the page.

I need a way to reload the page on user click for Ionic 4.

Please note that i made some changes in order to test the button action on click so i made it visible, but it's hidden if no Internet, and the picture as well.

Upvotes: 3

Views: 7735

Answers (2)

Sachith Ravihara
Sachith Ravihara

Reputation: 35

If you wanna reload your whole page, use this code.

window.location.reload();

Upvotes: 2

Ernest O. Fokuo
Ernest O. Fokuo

Reputation: 21

your code doesn't show what data you actually load on the call of the reload() method. **Note: your reload() function shouldn't be in your constructor. It should be out of the constructor on the same level as ngOnInit() { } **

So if there is data to be fetched, kindly call the functions/methods inside the reload() method like this to re-fetch and update the view:

reload() {
    this.getData();
}

// where getData() method is what does the actually loading of the data like:

getData() {
    this.apiService.fetchData()
    .subscribe(
        data => {
            this.items = data;
    }, err => {});
}

Upvotes: 2

Related Questions