CODEWITHSUNDEEP
javascriptcssangularionic-frameworkionic4
D.Wade
D.Wade

Reputation: 1

How do you target and modify all instances of CSS element in Ionic/Angular app?

I am trying to update a div with queryselector and .innterhtml to display in the view when the app loses network connectivity. The javascript works fine on the first view that loads the div, but the following pages do not show the div when they are loaded.

Is it because .addEventListener removes itself after its called?

I've tried using, queryselectorAll, and tried switching from using CSS ID to .class declarations.

I've also tried to do a full replication of network connectivity code for each page, which hasn't worked and seems to be inefficient anyway.

When I eliminate the first DIV instance, the 2nd DIV instance begins to work.

app.component.ts 

window.addEventListener('offline', () => {
    //Do task when no internet connection
    console.log("OFFLINE");
    document.querySelector('.offline').innerHTML = 'You are currently Offline...';
});

window.addEventListener('online', () => {
    //Do task when no internet connection
    console.log("ONLINE");
    var x = document.querySelectorAll(".offline");
    var i;
    for (i = 0; i < x.length; i++) {
        x[i].innerHTML = 'You are Online!';
    }
});

login.page.html ---> WHEN THIS WORKS

<div class="offline" style="color:red; text-align: center"></div>

welcome.page.html ---> THIS DOES NOT WORK

<div class="offline" style="color:red; text-align: center"></div>

details.page.html ---> THIS DOES NOT WORK

<div class="offline" style="color:red; text-align: center"></div>

I would like for the app to show that the network is offline as the user visits any and all pages. As of now, it only consistently does this for the first page that the user loads only.

Upvotes: 0

Views: 197

Answers (1)

rtpHarry
rtpHarry

Reputation: 13125

You have misunderstood the fundamental architecture of Angular / Ionic.

You shouldn't be trying to poke around in the HTML like this.

With Angular, you build components and then data models to drive it. Actually having to touch the html is considered "failing".

Instead, you should have something like this:

<div>
  <p *ngIf="IsOnline">I'm online</p>
  <p *ngIf="!IsOnline">I'm offline</p>
</div>

And then in the background you set the IsOnline variable.

You don't use the window.addEventListener('offline', api type code to monitor connectivity.

Instead, you should use the Ionic Native plugin called Network which exposes this information in a cross-device, Angular-friendly way:

So you would put some code in like this:

// watch network for a disconnection
let disconnectSubscription = this.network.onDisconnect().subscribe(() => {
  console.log('network was disconnected :-(');
});

// stop disconnect watch
disconnectSubscription.unsubscribe();


// watch network for a connection
let connectSubscription = this.network.onConnect().subscribe(() => {
  console.log('network connected!');
  // We just got a connection but we need to wait briefly
   // before we determine the connection type. Might need to wait.
  // prior to doing any api requests as well.
  setTimeout(() => {
    if (this.network.type === 'wifi') {
      console.log('we got a wifi connection, woohoo!');
    }
  }, 3000);
});

// stop connect watch
connectSubscription.unsubscribe();

This code isn't going to just drop in to your project, I'm just trying to show you the direction that you should be taking.

It seems like you are starting from the beginning so really what you need to do is learn more about Angular / Ionic. The snippet above needs you to understand modules, and observables, and a lot of concepts and it's not clear where I should start explaining from based on what you have said so far. I hope this helps you start your route to solving it though.

Upvotes: 1

Related Questions