Skip to main content

Posts

Check Internet Connectivity In Ionic 5 App

Hi all, in this example you can set a condition to check your internet is connected or not please follow the below steps First Create A new Project      ionic start AppName blank --type=angular           Note: In this example i used Tabs in App Now Create a Modal Page     ionic g page /modals/modal-page Now Create a Provider       ionic generate provider ConnectivityProvider     Note: Make sure your provider is present in Provider Array in app.module.ts file ConnectivityProvider: import { Injectable } from '@angular/core' ; import { Observable , fromEvent , merge , of } from 'rxjs' ; import { map } from 'rxjs/operators' ; @ Injectable ({ providedIn : 'root' }) export class ConnectivityProvider { public appIsOnline$ : Observable < boolean >; constructor () { this . initConnectivityMonitoring (); } private initConnectivityMonitoring () { if (! window || ! navigator ...
Recent posts

Ionic 4 + 5 Modal Window With Custom Height and Width

Create A New Ionic Project ionic start blank CustomModal blank --type=angular Now create a new modal page as per your need  ionic g page modal_page_name Open index.html and add this style tag in your header <style>     ion-modal {       margin-top: 50%;       margin-bottom: 20%;       margin-right: 10px;       margin-left: 10px;       border-radius: 10px;       --background-color: rgba(255, 255, 255, 0.7);     }   </style> Open home.module.ts and Import Your Modal Page import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { IonicModule } from '@ionic/angular'; import { FormsModule } from '@angular/forms'; import { RouterModule } from '@angular/router'; import { HomePage } from './home.page'; //here is my modal page component import { Det...

Chat App With Elastic Textarea - Ionic 4

Create A Project And Install This Packages ionic start blank chatApp blank --type=angular  For Elastic Textarea Install AutosizeModule npm install ngx-autosize  Optional  npm install @ionic/labs  Open home.module.ts and Import AutosizeModule import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { IonicModule } from '@ionic/angular'; import { FormsModule } from '@angular/forms'; import { RouterModule } from '@angular/router'; import { HomePage } from './home.page'; import {AutosizeModule} from 'ngx-autosize'; @NgModule({   imports: [     CommonModule,     FormsModule,     IonicModule,     AutosizeModule,     RouterModule.forChild([       {         path: '',         component: HomePage       }     ])   ],   declarations: [HomePage] ...