Posts

Showing posts from May, 2017

Set icon and splash screen in ionic3

First enter your Email and Password ionic login <it.vajidali@gmail.com> <**********> ionic cordova resources -i ionic cordova resources -s

Image Viewer in ionic3

Installation npm install --save ionic-img-viewer app.appmodule.ts import { IonicImageViewerModule } from 'ionic-img-viewer'; @NgModule({   imports: [     IonicImageViewerModule   ] }) export class AppModule {} Add the imageViewer property to the pictures. <img src="IMAGE_URL" imageViewer /> <img src="IMAGE_URL" imageViewer="OTHER_IMAGE_URL" /> i f you want bind image. <img src="{{item.image}}" imageViewer />

Not Completed

Image
Hide & Show < div class = "Cards" > < div [ hidden ]= "!item.isShowDetail" padding = "2px" > < img style = "height:200px;" src = "{{item.imgs}}" imageViewer />< br > <!--<img style="height:200px;" src="{{item.imgs}}" /><br>--> < p >< b > MOLECULE: </ b ></ p > < p > {{item.desc}} </ p > < p >< b > THERAPY SEGMENT: </ b ></ p > < p > {{item.vitamin}} </ p > </ div > </ div > Ts. isShowDetail: false getItems ( ev : any ) { // Reset items back to all of the items this . initializeItems (); // set val to the value of the searchbar let val = ev . target . value ; // if the valu...

ionic3 Alert Components

Alerts are a great way to offer the user the ability to choose a specific action or list of actions. They also can provide the user with important information, or require them to make a decision (or multiple decisions). Components: Basic Alerts prompt Alerts Confirmation Alerts Radio  Alerts Checkbox Alerts Confirmation Alerts: import { Component , ViewChild } from '@angular/core' ; import { Nav , Platform , AlertController } from 'ionic-angular' ; import { StatusBar } from '@ionic-native/status-bar' ; import { SplashScreen } from '@ionic-native/splash-screen' ; import { HomePage } from '../pages/home/home' ; import { Signup } from '../pages/signup/signup' ; @ Component ({ templateUrl: 'app.html' }) export class MyApp { @ ViewChild ( Nav ) nav : Nav ; rootPage : any = HomePage ; alert : any ; pages : Array <{ title : string , component : any }>;...

Create Action Sheet in Ionic v3

Action Sheets slide up from the bottom edge of the device screen, and display a set of options with the ability to confirm or cancel an action. Action Sheets can sometimes be used as an alternative to menus, however, they should not be used for navigation. import { AlertController } from 'ionic-angular'; export class MyPage {   constructor(public alertCtrl: AlertController) {   }   showRadio() {     let alert = this.alertCtrl.create();     alert.setTitle('Lightsaber color');     alert.addInput({       type: 'radio',       label: 'Blue',       value: 'blue',       checked: true     });     alert.addButton('Cancel');     alert.addButton({       text: 'OK',       handler: data => {         this.testRadioOpen = false;         this.testRadioResult = data; ...

Ionic Installation and create new ionic project

Installation: Platform notes:-    First, we need to start with a note about minimum requirements for building your app with the current release of Ionic. Ionic targets iPhone and Android devices (currently). We support  IOS 7+, and Android 4.1+. However, since there are a lot of different Android devices, it’s possible certain ones might not work. As always, we are looking for help testing and improving our device compatibility and would love help from the community on our GitHub project. Must be download and install following files.   D ownload and install  Git for Windows   I nstall the most recent version of  Apache Cordova   To install Cordova, make sure you have  Node.js  installed than run  "npm install -g cordova".    Java Jdk create an environment variable for JAVA_HOME pointing to the root folder where  the JAVA JDK was installed.  Apache Ant  To install Ant, download a zip from ...