Questions tagged [ionic2]

Ionic 2 is the next generation of Ionic, the open source SDK that enables developers to build performant, high-quality mobile apps using familiar web technologies (HTML, CSS, and JavaScript). Ionic 2 is usually paired with Angular (2). Ionic 2 can also be used as a CSS framework but you'll miss out on the powerful gestures, UI animations and more useful things.

What is Ionic 2?

Ionic 3 was released on 7 April 2017 to overtake Ionic 2.

Ionic 2 was the next generation of Ionic's initial release, the open source SDK that enabled developers to build performant, high-quality mobile apps using familiar web technologies (HTML, CSS, and JavaScript).

Ionic 2 was usually paired with Angular (2). Ionic 2 could also be used as a CSS framework but that would void the powerful gestures and UI animations made to mimic native mobile interaction.


How to install and setup a project

Installing Ionic 2 can be done using npm and the ionic cli.

To install Ionic 2 run $ npm install -g ionic cordova. This will immediately install the ionic cli so all your ionic commands are ready to be used.

To setup a project with different :

  • tabs: $ ionic start myApp tabs
  • sidemenu: $ ionic start myApp sidemenu
  • blank: $ ionic start myApp blank

Where tabs will create an application where 4 tabs (positioned at the bottom of the screen are generated), sidemenu will generate a project with a sidemenu (also showing good use of NavController utilities) and blank will generate a project with just a single page.


Maturity/Version

Ionic 2's current version is 3.12.0. The first release of the final version. (as of 8 March, 2017).

how to install the latest version

If you want to create a new project with 3.12.0: $ npm install -g ionic

If you want to update an existing project to 3.12.0:

Update your package.json to match the following dependencies, remove the existing node_modules directory, and then run npm install:

  "dependencies": {
    "@angular/common": "2.4.8",
    "@angular/compiler": "2.4.8",
    "@angular/compiler-cli": "2.4.8",
    "@angular/core": "2.4.8",
    "@angular/forms": "2.4.8",
    "@angular/http": "2.4.8",
    "@angular/platform-browser": "2.4.8",
    "@angular/platform-browser-dynamic": "2.4.8",
    "@angular/platform-server": "2.4.8",
    "@ionic/storage": "2.0.0",
    "ionic-angular": "2.2.0",
    "ionic-native": "2.4.1",
    "ionicons": "3.0.0",
    "rxjs": "5.0.1",
    "sw-toolbox": "3.4.0",
    "zone.js": "0.7.2"
  },
  "devDependencies": {
    "@ionic/app-scripts": "1.1.4",
    "typescript": "2.0.9"
  }

Read more at 1


Useful Ionic 2 links

And of course the active community of Stack Overflow.

12143 questions
26
votes
14 answers

How to reload the ion-page after pop() in ionic2

I have 2 pages Page1 and Page2. I have used this.nav.pop() in Page2 and it will pop the Page2 and Page1 will enable but i want to refresh the Page1. Thank you in advance.
Akash Rao
  • 920
  • 3
  • 12
  • 25
26
votes
1 answer

How to call function every 2 mins in angular2?

How do I call a save function every two minutes in Angular2?
Victor Carvalho
  • 1,610
  • 3
  • 14
  • 18
25
votes
1 answer

API error: <_UIKBCompatInputView: 0x13fd1d7c0; frame = (0 0; 0 0); layer = > returned 0 width, assuming UIViewNoIntrinsicMetric

I'm using Ionic 3 on iPhone 7 plus with iOS 11. When I run my App, and fill in some text/input fields (basic forms) the app freezes for a few seconds and becomes completely unresponsive (which isn't good, not to say the least). I noticed this error…
Dimitri
  • 2,240
  • 3
  • 21
  • 39
25
votes
6 answers

Can't resolve all parameters for Storage: (?)

I am getting values from a modal and I want to store and get it using local storage in ionic2 angular2 project. My code is given below. It gives following error: In home.ts page, I have imported storage import { Storage } from…
alka vaghela
  • 805
  • 4
  • 13
  • 33
25
votes
2 answers

Ionic 2 - How to manage global variables?

THE SITUATION: In my Ionic 2 app i have a simple login which form is contained inside the right menu. You click on the right icon in the header - will appear the menu with the login form. The login code is inside the app.component and the login…
FrancescoMussi
  • 20,760
  • 39
  • 126
  • 178
25
votes
7 answers

How to position a popover in Ionic 2

How do I manually position a popover in Ionic 2? I can't set the position in a css class, since the popover controller sets the position with an inline style.
Schlaus
  • 18,144
  • 10
  • 36
  • 64
25
votes
5 answers

Angular 2 HTTP Progress bar

Is there currently a way within Angular 2 to retrieve the progress (i.e. percentage done) of an ajax call, using the angular2/http module? I use the following code to make my HTTP calls: let body = JSON.stringify(params); let headers…
C. Sysmans
  • 453
  • 1
  • 7
  • 13
24
votes
3 answers

Singletons in Ionic 3, Angular 4

I am defining service as class, something like this: @Injectable() export class MyService { ... } In other components or pages, I am importing that class with just import command. import { MyService } from '../pages/services/myservice'; In…
Dragan Malinovic
  • 603
  • 6
  • 12
24
votes
8 answers

How do I run an ionic app in android studio emulator?

I am new to ionic and I want to run my app on android studio emulator. I did refer the link https://developer.android.com/studio/run/index.html. But I do not seem to understand how to run my ionic app on emulator
manasa sidhardhan
  • 251
  • 1
  • 3
  • 7
23
votes
4 answers

Directive to disable Cut, Copy and Paste function for textbox using Angular2

I am using Angular2 to restrict the copy and paste in textbox. But how do i write a custom directive, so that it will be easy to apply for all the text fields. Below is the working code to restrict the copy and paste functionality.
vishnu
  • 4,377
  • 15
  • 52
  • 89
23
votes
6 answers

ionic cordova run android adb command failed with exit code 137

i am new to ionic and i start basic tabs project using ionic cli. Everything is working fine, except when i tried "ionic cordova run android" command with redmi note 4 giving following error. Error: Failed to execute shell command…
Mohit Patil
  • 436
  • 1
  • 5
  • 15
23
votes
6 answers

Custom component in ionic v3

I wanted to create a simple component and include it on a page. I created it with ionic g component my-header (ionic-cli v3 beta), fixed the IonicPageModule bug and then added to another page. I then get this error: Error: Uncaught (in promise):…
Andreas Gassmann
  • 6,334
  • 7
  • 32
  • 45
23
votes
5 answers

how to make icons and buttons bigger in ionic 2

How can make button and icon size bigger in fallowing code: Explore Nearby
RSA
  • 1,417
  • 4
  • 22
  • 37
23
votes
3 answers

Calculate distance between two points in Leaflet

How do you calculate the distance between two markers in Leaflet-ionic2? Couldn't figure out, I hope there is an Algorithme to do as soon as i select a marker it show me the distance between my location and the marker. Thanks..
Taieb
  • 920
  • 3
  • 16
  • 37
23
votes
4 answers

How to return Observable after some Promise get resolved in Ionic 2/Angular 2?

I am trying to return an observable after a successful completion of my Promise, but that function is not returning Observable. To be specific to code, i want to fetch auth token from storage (returns promise) and after that data got fetched then…
M. Habib
  • 623
  • 1
  • 9
  • 15