Posts

Showing posts from September, 2020

ionic app status bar color changing

Image
  // this.statusBar.styleDefault(); replace above line with below code if ( this . platform . is ( 'android' )) { this . statusBar . overlaysWebView ( false ); this . statusBar . styleLightContent (); // this.statusBar.backgroundColorByHexString('#ffffff'); }

dark mode in ionic5

  darkmode () { const prefersColor = window . matchMedia ( '(prefers-color-scheme: dark)' ); this . dark = prefersColor . matches ; this . updateDarkMode (); prefersColor . addEventListener ( 'change' , mediaQuery => { this . dark = mediaQuery . matches ; this . updateDarkMode (); } ); } updateDarkMode () { this . dark = true ; // alert("data") document . body . classList . toggle ( 'dark' , this . dark ); } add functions in ngoninit of app.component.ts

ionic tinder ui

<ion-content> < ion-card *ngFor = "let card of cards1" style = " width:100% " [style.position] = "'absolute'" > < ion-card-header > < ion-card-title > < img [src] = "card.img" [style.width] = "'100%'" > < h3 > {{ card.title }} </ h3 > < p > {{ card.description }} </ p > < p > ID:{{card.ID}} </ p > </ ion-card-title > </ ion-card-header > </ ion-card > </ ion-content > loadTinderCards () { this . cards1 = [ { ID : 0 , img : "https://placeimg.com/300/300/people" , title : "Demo card 1" , description : "This is a demo for Tinder like swipe cards" }, { ID : 0 , img : "https://placeimg.com/300/300/animals" , title : "Demo card 2" , description : "...

# id based change the home page content in ionic5 and ionic-swipe-all

  < div id = "block" swipeAll (swipeup) = "swipeUp($event,'block3')" (swipedown) = "swipeDown($event)" ></ div > npm i  ionic-swipe-all import { IonicSwipeAllModule } from 'ionic-swipe-all' ; @ NgModule ( { imports : [ IonicSwipeAllModule ] , } ) export class AppModule { } home.page.html <div swipeAll (swipe)="swipeAll($event)" (swipeleft)="swipeLeft($event)" (swiperight)="swipeRight($event)" (swipeup)="swipeUp($event)" (swipedown)="swipeDown($event)" ></div> home.page.ts swipeAll ( event : any ) : any { console . log ( 'Swipe All' , event ) ; } swipeLeft ( event : any ) : any { console . log ( 'Swipe Left' , event ) ; } swipeRight ( event : any ) : any { console . log ( 'Swipe Right' , ev...

ionic 5 open another application

 import { Component } from '@angular/core'; import { AppLauncher, AppLauncherOptions } from '@ionic-native/app-launcher/ngx'; import { Platform } from '@ionic/angular'; @Component({   selector: 'app-tab3',   templateUrl: 'tab3.page.html',   styleUrls: ['tab3.page.scss'] }) export class Tab3Page {        constructor(private appLauncher: AppLauncher,     private platform: Platform) { }   open() {     const options: AppLauncherOptions = {       packageName:"com.instagram.android"     }          // if(this.platform.is('ios')) {     //   options.uri = 'fb://'     // } else {     //   options.packageName = 'com.instagram.android'     // }          this.appLauncher.canLaunch(options)       .then((canLaunch: boolean) => {         if (canLaunch) {     ...

free templates

 https://github.com/ionicthemes/ionic5-starter-app-tutorial https://github.com/ionictemplate-app/Ionic-5-Angular-8-Fitness-UI-Theme-Template-App-Starter-App https://github.com/ionic-team/ionic-conference-app https://github.com/ionic-team/ionic-conference-app