How to show Image when No internet connection in Ionic 2 - ionic-framework

I am Beginner in Ionic 2 . I am working on Network Connection/Detection Using Network native plugin.
I want show wifi symbol image when there is no Internet connection
Example .
And i want to hide this Dashboard when there is no internet connection and required to show wifi image symbol like above image
This is my code for dashboard.html
<ion-grid responsive-sm center >
<ion-row style="background-color: #fff;">
</ion-row>
<ion-row center>
<ion-col (click)="gotomaps()"> <ion-fab >
<button ion-fab > <img src="assets/icon/location.png"/> </button>
<ion-grid text-center>
<label style="font-size: 15px; font-family:inherit; text-align:center ;margin:8px;color:#A62C23;font-weight: bold"> Mapping</label>
</ion-grid>
</ion-fab>
</ion-col>
<ion-col width-50 center (click)="gotosendmanager()"> <ion-fab >
<button ion-fab > <img src="assets/icon/folder.png"/> </button>
<ion-grid text-center>
<label style="font-size: 15px; font-family: arial; text-align:center;margin:8px;color:#A62C23;font-weight: bold"> Send manager</label>
</ion-grid>
</ion-fab>
</ion-col>
</ion-row>
<div class="or-label" text-center hidden>
<img alt="Logo" src="assets/imgs/wifi.png" >
</div>
<ion-row >
<ion-col width-50 (click)="gototabs()"> <ion-fab >
<button ion-fab > <img src="assets/icon/question.png"/> </button>
<ion-grid text-center>
<label style="font-size: 15px; font-family: arial; text-align:center ;margin:8px;color:#A62C23;font-weight: bold"> Help</label>
</ion-grid>
</ion-fab>
</ion-col>
<ion-col width-50 (click)="exit()"> <ion-fab >
<button ion-fab > <img src="assets/icon/logout.png"/> </button>
<ion-grid text-center>
<label style="font-size: 15px; font-family: arial; text-align:center ;margin:8px;color:#A62C23;font-weight: bold"> Exit</label>
</ion-grid>
</ion-fab>
</ion-col>
</ion-row>
<ion-row style="background-color: #fff;">
</ion-row>
</ion-grid>

I have get perfect image hide and show w.r.to Internet connection with this code
Import Network plugin
import { Network } from '#ionic-native/network';
import {Observable} from 'rxjs/Observable';
import 'rxjs/add/observable/fromEvent';
Put this under before constructor
hide:boolean = true;
Put this code under Constructor
var offline = Observable.fromEvent(document, "offline");
var online = Observable.fromEvent(document, "online");
offline.subscribe(() => {
this.hide =false;
});
online.subscribe(()=>{
this.hide =true;
});
Put this under html file
<div class="or-label" text-center *ngIf="!hide" >
<img alt="Logo" src="assets/imgs/wifi.png" >
</div>
//Result : When your device Internet is not available then wifi image is visible and wise versa..

I will create for youNetworkConnectionProvider.ts provider for listening network event.
import {Injectable} from '#angular/core';
import {Platform, ToastController, Events} from "ionic-angular";
import {Network} from "#ionic-native/network";
export enum ConnectionStatusEnum {
Online,
Offline
}
#Injectable()
export class NetworkConnectionProvider {
public isOnline: boolean = true;
private previousStatus;
constructor(private network: Network,
private platform:Platform,
private toastCtrl: ToastController,
private eventCtrl: Events) {
this.platform.ready().then(() => {
this.previousStatus = ConnectionStatusEnum.Online;
this.initializeNetworkEvents();
});
}
public initializeNetworkEvents(): void {
this.network.onDisconnect().subscribe(() => {
if (this.previousStatus === ConnectionStatusEnum.Online) {
this.eventCtrl.publish('network:offline');
}
this.previousStatus = ConnectionStatusEnum.Offline;
this.isOnline = false;
});
this.network.onConnect().subscribe(() => {
if (this.previousStatus === ConnectionStatusEnum.Offline) {
this.eventCtrl.publish('network:online');
}
this.previousStatus = ConnectionStatusEnum.Online;
this.isOnline = true;
});
}
}
And then inject in NetworkConnectionProvider in app.module.ts
Provider Uses
In dashboard.ts
First of all inject private networkCheck:NetworkConnectionProvider and private eventCtrl: Events in constructor. Then listen it.
flag:boolean=false;
this.eventCtrl.subscribe('network:online', () => {
// online action
this.flag =true;
});
this.eventCtrl.subscribe('network:offline', () => {
// offline action
this.flag =false;
});
In dashboard.html need to modify
<ion-grid responsive-sm center >
<ion-row style="background-color: #fff;">
</ion-row>
<ion-row center *ngIf="flag">
<ion-col (click)="gotomaps()"> <ion-fab >
<button ion-fab > <img src="assets/icon/location.png"/> </button>
<ion-grid text-center>
<label style="font-size: 15px; font-family:inherit; text-align:center ;margin:8px;color:#A62C23;font-weight: bold"> Mapping</label>
</ion-grid>
</ion-fab>
</ion-col>
<ion-col width-50 center (click)="gotosendmanager()"> <ion-fab >
<button ion-fab > <img src="assets/icon/folder.png"/> </button>
<ion-grid text-center>
<label style="font-size: 15px; font-family: arial; text-align:center;margin:8px;color:#A62C23;font-weight: bold"> Send manager</label>
</ion-grid>
</ion-fab>
</ion-col>
</ion-row>
<div class="or-label" text-center *ngIf="!flag">
<img alt="Logo" src="assets/imgs/wifi.png" >
</div>
<ion-row *ngIf="flag">
<ion-col width-50 (click)="gototabs()"> <ion-fab >
<button ion-fab > <img src="assets/icon/question.png"/> </button>
<ion-grid text-center>
<label style="font-size: 15px; font-family: arial; text-align:center ;margin:8px;color:#A62C23;font-weight: bold"> Help</label>
</ion-grid>
</ion-fab>
</ion-col>
<ion-col width-50 (click)="exit()"> <ion-fab >
<button ion-fab > <img src="assets/icon/logout.png"/> </button>
<ion-grid text-center>
<label style="font-size: 15px; font-family: arial; text-align:center ;margin:8px;color:#A62C23;font-weight: bold"> Exit</label>
</ion-grid>
</ion-fab>
</ion-col>
</ion-row>
<ion-row style="background-color: #fff;">
</ion-row>
</ion-grid>

Following #Utpaul answer. You can also use hidden attribute which doesn't delete your element from the Dom like ngIf does.
<ion-grid responsive-sm center [hidden]="flag" >

Maybe this concept can help you..
You can use #ionic-native/network
To check current network connection inside the device
isConnected(): boolean {
let conntype = this.network.type;
return conntype && conntype !== 'unknown' && conntype !== 'none';
}
There is a function like onConnect and onDisconnect inside the ionic-native/network modules, but it only checks whenever you connect/disconnect the network from your phone when you were in-app. and maybe its useful to use the function if someone suddenly has no /disable the network connection
Constructor :
constructor(private network: Network, private toast: ToastController) { }
Simply put in the constructor
if(!this.isConnected()) {
this.openToast(this.isConnected());
}
Simply put inside the constructor of the page, This is how we can automatically check the network connection after the page is loaded
openToast() function
openToast(isConnected: boolean) {
let networkType = this.network.type;
this.toast.create({
message: `Network type: ${networkType} and ${isConnected}`,
duration: 3000
}).present();
}
and take note that in ionic 3.. The supported version of #ionic-native/network < 5.0.0
I tested on Ionic 3 can use version 4.6.0
This is how we declare import { Network } from '#ionic-native/network/index';
More info :
https://www.npmjs.com/package/#ionic-native/network
Result : if the user open up the page with no internet connection,
it's toast up a message
I hope someone found this helpful information

Related

how to nest lists in ionic 4 without it looking a complete mess?

Having problems trying to nest lists, I expected them to be inset the further down they go, but instead I've got a complete mess as you can see in the screenshot below.
Here's the code:
<ion-content padding>
<div *ngIf="categories && categories.length > 0; then validContent else noContent"></div>
<ng-template #validContent>
<p>Please select the categories you wish to receive content for.</p>
<form (ngSubmit)="processForm($event)" id="userForm" class="ssp__form">
<ion-list lines="none" no-padding>
<ion-item lines="none" *ngFor="let category of categories">
<ion-label>{{ category.name }}</ion-label>
<ion-checkbox [name]="category.slug" [(ngModel)]="submissionData[category.term_id]"></ion-checkbox>
<ion-list inset="true" style="width:100%;" lines="none" no-padding *ngIf="category.children.length > 0">
<ion-item *ngFor="let subCategory of category.children">
<ion-label>{{ subCategory.name }}</ion-label>
<ion-checkbox [name]="subCategory.slug" [(ngModel)]="submissionData[subCategory.term_id]"></ion-checkbox>
</ion-item>
</ion-list>
</ion-item>
</ion-list>
<ion-button type="submit" style="width:100%;" color="primary" expand="block">Save Categories</ion-button>
</form>
</ng-template>
<ng-template #noContent>
<ion-card>
<ion-card-header>
<ion-card-title style="text-align: center; font-size: 14px;">No Categories Found.</ion-card-title>
</ion-card-header>
<ion-card-content>
<p style="text-align: center">There are no categories for you to read at this time.</p>
</ion-card-content>
</ion-card>
</ng-template>
</ion-content>

How to use 3 ionic-slides in one page and take instance of each ion-slides? [duplicate]

I am using ionic 3 while placing 3 swiper sliders on same page i am unable to control their behavior separately i am bit new for angular js as well ts and ionic
here is code
<ion-slides style="height: 30%;" pager>
<ion-slide style="background-color: green" *ngFor="let post of posts">
<h1>{{post.title}}</h1>
<img [src]="post.image" />
</ion-slide>
</ion-slides>
<ion-slides style="height: 30%;" pager>
<ion-slide style="background-color: green" *ngFor="let post of posts">
<h1>{{post.title}}</h1>
<img [src]="post.image" />
</ion-slide>
</ion-slides>
ts is
#ViewChild(Slides) slides: Slides;
goToSlide() {
this.slides.slideTo(2, 500);
}
ngAfterViewInit() {
//this.slides.freeMode = true;
this.slides .slidesPerView=3,
this.slides.spaceBetween=5;
//this.slides.loop=true;
}
Instead of ViewChild, you can use ViewChildren to get all the instances of the slider in that page (Angular docs). Please take a look at this working plunker. The end result would be something like this:
Like you can see in the plunker, we get all the instances of the slider, and then we just get the target instance by using its index:
import { Component, ViewChildren, QueryList } from '#angular/core';
import { NavController, Content, Slides } from 'ionic-angular';
#Component({...})
export class HomePage {
#ViewChildren(Slides) slides: QueryList<Slides>;
constructor() {}
public move(index: number): void {
this.slides.toArray()[index].slideNext(500);
}
}
An then in the view:
<ion-header>
<ion-navbar>
<ion-title>Ionic Demo</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<ion-slides style="height: 75px" pager>
<ion-slide><h1>Slide 1</h1></ion-slide>
<ion-slide><h1>Slide 2</h1></ion-slide>
<ion-slide><h1>Slide 3</h1></ion-slide>
</ion-slides>
<ion-slides style="height: 75px" pager>
<ion-slide><h1>Slide 1</h1></ion-slide>
<ion-slide><h1>Slide 2</h1></ion-slide>
<ion-slide><h1>Slide 3</h1></ion-slide>
</ion-slides>
<ion-slides style="height: 75px" pager>
<ion-slide><h1>Slide 1</h1></ion-slide>
<ion-slide><h1>Slide 2</h1></ion-slide>
<ion-slide><h1>Slide 3</h1></ion-slide>
</ion-slides>
<ion-row>
<ion-col>
<button (click)="move(0)" ion-button text-only>Move First</button>
</ion-col>
<ion-col>
<button (click)="move(1)" ion-button text-only>Move Second</button>
</ion-col>
<ion-col>
<button (click)="move(2)" ion-button text-only>Move Third</button>
</ion-col>
</ion-row>
</ion-content>

Infinite-scroll doen’t fire inside a custom component - ionic 2

I'm working on an ionic application. I’m trying to use an infinite-scroll item in a custom component that contains a segement with two Lists that are showen according to the user's choices.
This is the code of the component :
<ion-content *ngIf="show">
<div no-margin no-padding style="color: rgba(25,94,97,0.98)" >
<ion-segment style="color: rgba(25,94,97,0.98)" [(ngModel)]="chx">
<ion-segment-button style="color: rgba(25,94,97,0.98)" value="most">
MOST TRUSTED
</ion-segment-button>
<ion-segment-button style="color: rgba(25,94,97,0.98)" value="recent">
LATEST
</ion-segment-button>
</ion-segment>
</div>
<div no-margin no-padding [ngSwitch]="chx">
<ion-list no-margin no-padding *ngSwitchCase="'most'">
<post-card-most no-margin *ngFor="let post of mostTrusted" [post]="post"> </post-card-most>
<ion-item no-border no-lines align-self-center style="align-content: center; text-decoration-color: grey" *ngIf="isscrollmost" margin-top> <p style="text-align: center; color: grey"> No data to display... </p></ion-item>
<ion-infinite-scroll (ionInfinite)="doInfinite2($event)" threshold="100px">
<ion-infinite-scroll-content
loadingSpinner="{{'BUBBLES' | translate}}"
loadingText="{{'LOADING' | translate}}">
</ion-infinite-scroll-content>
</ion-infinite-scroll>
</ion-list>
<ion-list no-margin no-padding *ngSwitchCase="'recent'">
<page-post-card no-margin *ngFor="let post of latestTrusted" [post]="post" [isNotif]=false [home]=false>
</page-post-card>
<ion-item no-border no-lines align-self-center style="align-content: center; text-decoration-color: grey" *ngIf="isscrollrecent" margin-top> <p style="text-align: center; color: grey"> No data to display... </p></ion-item>
<ion-infinite-scroll (ionInfinite)="doInfinite($event)" threshold="100px">
<ion-infinite-scroll-content
loadingSpinner="{{'BUBBLES' | translate}}"
loadingText="{{'LOADING' | translate}}">
</ion-infinite-scroll-content>
</ion-infinite-scroll>
</ion-list>
</div>
</ion-content>
The component is used in an ionic page like this:
<ion-content no-padding>
<topicsearch [show]="showresult"></topicsearch> <!-- This is the custom component -->
<div *ngIf="!showresult" >
<ion-list *ngFor="let top of topics">
<ion-item (click)="topicsearchselected(top.label)" > {{top?.label}}</ion-item>
</ion-list>
</div>
</ion-content>
The problem is that the infinite-scroll doesn’t fire when scrolling down in the custom component.
Does anyone have a solution for that ?
Your component using ion-content which including inside another ion-content. Remove ion-content from component.
And also doInfinite function will be declared inside the component ts.

Ionic 2 horitzonal scroll with ion items

I'm trying to create a list of avatars, and each avatar to appear in the right of the previous avatar. When an avatar reaches the end of the screen, the user will be able to scroll left or right to see more avatars.
I achieved this with the following code which worked in the previous ionic grid version, and now no longer works and when an avatar reaches the end of the screen, a new line is created instead of keep added to the same line with an option to scroll horitzonally:
<ion-scroll scrollX="true" class="chooseBg" style="height:70px">
<ion-row>
<ion-col *ngFor="let avatar of avatars"
style="padding-right:0">
<ion-item>
<ion-avatar>
<img
[src]="avatarImage(avatar)"/>
</ion-avatar>
</ion-item>
</ion-col>
</ion-row>
</ion-scroll>
Any ideas how I can create hortizonal scroll of items using latest ionic grid system? (Ionic 2.2)
This is my Horizontal Scroll with clickable Cards in it:
<ion-scroll scrollX="true" class="item" style="width:100vw;height:100%;margin:0px;padding:0px;">
<ion-row>
<ion-col >
<ion-card tabable class="card-width" (click)='categorieDetail("Rap")'>
<img style="width:33vw;" src="assets/img/rap.png"/>
<div text-wrap class="card-title-mini">Rap</div>
</ion-card>
</ion-col>
<ion-col >
<ion-card tabable class="card-width" (click)='categorieDetail("Singing")'>
<img style="width:33vw;" src="assets/img/sing.png"/>
<div text-wrap class="card-title-mini">Singing</div>
</ion-card>
</ion-col>
<ion-col >
<ion-card tabable class="card-width" (click)='categorieDetail("Skateboard")'>
<img style="width:33vw;" src="assets/img/skateboarding.png"/>
<div text-wrap class="card-title-mini">Skateboard</div>
</ion-card>
</ion-col>
<ion-col >
<ion-card tabable class="card-width" (click)='categorieDetail("Workout")'>
<img style="width:33vw;" src="assets/img/workout.png"/>
<div text-wrap class="card-title-mini">Workout</div>
</ion-card>
</ion-col>
<ion-col >
<ion-card tabable class="card-width" (click)='categorieDetail("Drawing Tattoo")'>
<img style="width:33vw;" src="assets/img/drawingtattoo.png"/>
<div text-wrap class="card-title-mini">Drawing Tattoo</div>
</ion-card>
</ion-col>
<ion-col >
<ion-card tabable class="card-width" (click)='categorieDetail("Shuffle")'>
<img style="width:33vw;" src="assets/img/shuffle.png"/>
<div text-wrap class="card-title-mini">Shuffle</div>
</ion-card>
</ion-col>
<ion-col >
<ion-card tabable class="card-width" (click)='categorieDetail("Gaming")'>
<img style="width:33vw;" src="assets/img/gaming.png"/>
<div text-wrap class="card-title-mini">Gaming</div>
</ion-card>
</ion-col>
<ion-col >
<ion-card tabable class="card-width" (click)='categorieDetail("Beatbox")'>
<img style="width:33vw;" src="assets/img/beatbox.png"/>
<div text-wrap class="card-title-mini">Beatbox</div>
</ion-card>
</ion-col>
</ion-row>
</ion-scroll>
Well its hardcoded but you can fill it like you do with *ngFor as well.
this is my css:
ion-card {
position: relative;
text-align: center;
margin: 0;
}
.column-width {
width: 100px;
}
.card-width {
width: 33vw;
padding: 0px !important;
margin: 0px !important;
background-color : transparent;
color : transparent;
height: 33vw;
}
.card-title-mini {
position: absolute;
top: 45%;
font-size: 5vw;
width: 100%;
color: #fff;
font-weight: bold;
}
This scroll works on all devices and browsers.
Maybe my scroll might be helpfull for you.

ion-content inside ion-content scroll-false doesn't scroll

I need to have a fixed element on a page, and then a scrollable list.
I added a ion-content inside the first ion-content. But it doesn't scroll.
<ion-view title="Bayonne" hide-back-button="true" id="page5" style="background-color:#1B463C;">
<ion-content scroll="true" padding="false" class="has-header">
<div>
<img src="img/cQzLvAwuSqCLeyZHzhBd_map.png" width="100%" height="auto" style="display: block; margin-left: auto; margin-right: auto;">
</div>
<div id="bayonne-button-bar1" class=" button-bar ">
<button id="bayonne-button1" style="border-radius:0px 0px 0px 0px;" class=" button button-assertive button-block buttonnomargin">Lieux</button>
<a ui-sref="circuits" id="bayonne-button2" style="border-radius:0px 0px 0px 0px;" class=" button button-dark button-block buttonnomargin">Circuits</a>
</div>
<ion-content id="contentInside">
<ion-list id="bayonne-list2">
<ion-item class="item-thumbnail-left " id="bayonne-list-item12" ui-sref="rempart">
<img src="img/S6OgBxiMQdSttmcgQNFJ_old.png">
<h2>Parc de la Poterne</h2>
</ion-item>
<ion-item class="item-thumbnail-left " id="bayonne-list-item11" ui-sref="rempart">
<img src="img/0CoPf6OkTGWKNa0SUvI1_rempart.jpg">
<h2>Parc de la Poterne</h2>
</ion-item>
<ion-item class="item-thumbnail-left item-icon-right " id="bayonne-list-item7">
<img src="img/St3jeK3kRVC7bY3TODRt_tour.png">
<h2>Château-Vieux</h2>
<i class="icon ion-android-walk"></i>
</ion-item>
<ion-item class="item-thumbnail-left " id="bayonne-list-item13">
<img src="img/1E4YdOePR62V8ZoECOuL_cloitre.jpg">
<h2>Cloître</h2>
</ion-item>
<ion-item class="item-thumbnail-left " id="bayonne-list-item5">
<img src="img/sDFRnANETvaagk5B01nZ_bayonne_cathedrale_et_cloitre_03-05-2012___11.JPG">
<h2>Cathédrale</h2>
</ion-item>
<ion-item class="item-thumbnail-left " id="bayonne-list-item6">
<img src="img/n3OwTRCOTDSW1V7q2Z3R_reduit.jpg">
<h2>Place du Réduit</h2>
</ion-item>
<ion-item class="item-thumbnail-left " id="bayonne-list-item14">
<img src="img/qeuF4erGTQOtqvgTUOD1_escalier.jpg">
<h2>Escaliers</h2>
</ion-item>
</ion-list>
</ion-content>
</ion-content>
You cannot have a ion-content inside another ion-content it's not a good practice.
If you want a content to be static you can use ion-header with subheader class.
<ion-header class="bar bar-subheader">
<div>
<img src="img/cQzLvAwuSqCLeyZHzhBd_map.png" width="100%" height="auto" style="display: block; margin-left: auto; margin-right: auto;">
</div>
<div id="bayonne-button-bar1" class=" button-bar ">
<button id="bayonne-button1" style="border-radius:0px 0px 0px 0px;" class=" button button-assertive button-block buttonnomargin">Lieux</button>
<a ui-sref="circuits" id="bayonne-button2" style="border-radius:0px 0px 0px 0px;" class=" button button-dark button-block buttonnomargin">Circuits</a>
</div>
Now the image and button will be static in the header.
NOTE:
It is must to include has-subheader class in ion-content.
<ion-content class="has-subheader">
"Your content goes here"
</ion-content>