Reload current page in Ionic 4, angular 7

Question

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.

please try this my code : [stackoverflow.com/questions/50115582/… — keval nayak
– keval nayak, Commented Apr 10, 2019 at 6:25
Hello, thanks but i have the latest ionic and angular, i don't have navCtrl, i have angular router instead. — pixel draw solutions
– pixel draw solutions, Commented Apr 10, 2019 at 7:57

Ernest O. Fokuo · Accepted Answer · 2019-07-01 00:30:23Z

2

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 => {});
}

answered Jul 1, 2019 at 0:30

Ernest O. Fokuo

211 silver badge6 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sachith Ravihara · Accepted Answer · 2021-05-25 11:30:18Z

2

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

window.location.reload();

answered May 25, 2021 at 11:30

Sachith Ravihara

336 bronze badges

Collectives™ on Stack Overflow

Reload current page in Ionic 4, angular 7

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related