Posts

When build error with ionic cordova

   npm install  ng add @ionic/cordova-builders

Search functionality in ionic 4

HTML FIle  <ion-searchbar (ionInput)="getItems($event)" placeholder="Search by name"></ion-searchbar> <ion-list lines="full">   <ion-item button *ngFor="let item of lists">     <ion-label>{{item.name}} <p>{{item.relation}}</p> </ion-label>     <ion-icon name="information-circle-outline" slot="end"></ion-icon>   </ion-item> </ion-list> TS.file export class SearchPage implements OnInit {   lists: any;   searchQuery: '';   constructor() {     this.initializeItems();    }    initializeItems() {     this.lists = [        {name: 'vajid Ali', relation: 'Father'},       {name: 'vajid Ali', relation: 'Uncel'},       {name: 'vajid Ali', relation: 'Brother'},       {name: 'vajid Ali', relation: 'Father'}, ...

Ionic 4 buttons

Side Menu Button <ion-buttons slot="start">  <ion-menu-button></ion-menu-button> </ion-buttons> Back Button <ion-buttons slot="start">           <ion-back-button></ion-back-button>  </ion-buttons> End Search button <ion-buttons slot="end">  <ion-button (click)="doSomething()">   <ion-icon slot="icon-only" name="more"></ion-icon>  </ion-button> </ion-buttons>

10 Hacks for ionic apps

Remove Content scroll bar : * ::-webkit-scrollbar {   display: none; }

AngularFire 2 cmd

Image
npm install firebase angularfire2 --save

If user already logged in then re-direct navigate on Home page

import { AuthProvider } from '../providers/auth/auth'; import { AngularFireAuth } from 'angularfire2/auth'; @Component({   templateUrl: 'app.html' }) export class MyApp {   rootPage:any = ' ' ;   constructor( public afAuth : AngularFireAuth, public auth : AuthProvider, public platform: Platform, public statusBar: StatusBar, splashScreen: SplashScreen) {     platform.ready().then(() => {      this.statusBar.backgroundColorByHexString('#024e44');       splashScreen.hide();     });     this.afAuth.authState     .subscribe(       user => {         if (user) {           this.rootPage = TabsPage;         } else {           this.rootPage = LoginPage;         }       },       () => {         this.rootPag...

Hide Tabs when open sub pages

<ion-tabs>   <ion-tab [root]="tab1Root" tabTitle="Short Note"  tabsHideOnSubPages="true"></ion-tab>   <ion-tab [root]="tab2Root"  tabTitle="Full Note"  tabsHideOnSubPages="true"></ion-tab>   <ion-tab [root]="tab3Root"  tabTitle="My Profile"  tabsHideOnSubPages="true"></ion-tab> </ion-tabs>  tabsHideOnSubPages="true"