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
3
votes
0 answers

Unnecessary Usage of Javascript in Android Application's Webview

We are using Ionic3/Angular framework to building mobile applications. But in one of the applications, our internal security team raised a security threat inside webview. First issue: "Unnecessary Usage of Javascript in Android Application's…
vishnu
  • 4,377
  • 15
  • 52
  • 89
3
votes
0 answers

Angular HTTP API calls timeout intermittently?

As the query implies, API calls being blocked occasionally and doesn't return the response but time out. Not sure what's going on. I did debug to check whether anything wrong with the server side implementation and I have had found that the API…
Stella
  • 1,817
  • 6
  • 30
  • 55
3
votes
3 answers

align-text in ion-input Ionic 2

I have this html in ionic Email how to make text input align-text in right side
Indra suandi
  • 141
  • 1
  • 3
  • 15
3
votes
1 answer

Ionic show ion-refresher programmatically

i want to display the ion-refresher programmatically. e.g on the first page load i load the data and want to show the ion-refresher. i've not found any build in function only _beginRefresh. this function will fire the refresher, however it will not…
markus
  • 475
  • 10
  • 27
3
votes
1 answer

Google Map not showing with Ionic 2 native google-maps plugin

I am trying to embed a google map on my Ionic 2 app, but the map is not showing. I took the code from https://ionicframework.com/docs/native/google-maps/ Here is my code : home.html
saperlipopette
  • 1,603
  • 12
  • 26
3
votes
0 answers

SKPaymentTransactionObserver warning on submitting IOS In-App purchase product in App store with Ionic 2 App

I am trying to submit Ionic 2 Application with in-app purchase in apple App store. I am getting the below SKPaymentTransactionObserver method warning in App store promotion section. How to overcome it?
Prithivi Raj
  • 2,658
  • 1
  • 19
  • 34
3
votes
0 answers

Ionic 2 WKWebview CORS example - getting HTTP status 0 URL: null on iOS

I can't seem to find a simple example of correctly using CORS in conjunction with WKWebview for Ionic 2 on iOS. Here's the code I'm using, which was previously working on UIWebview: let headers = new Headers(); headers.append('Content-Type',…
Dave
  • 5,283
  • 7
  • 44
  • 66
3
votes
1 answer

Where's sqlite database file located in ionic 2 cordova

I'm working with cordova-plugin-sqlite in angular2 ionic2. But I didn't find database file anywhere. I' have seen many questions regarding this issue but none of them helped me. It is not present in www folder. I want to know this .db file lies…
Zeeshan Malik
  • 627
  • 1
  • 14
  • 31
3
votes
2 answers

How to navigate from tab2 to tab1 on clicking device back button in ionic3

I am following this https://ionicframework.com/docs/components/#tabs After login i am using this key to navigate to next page this.navCtrl.setRoot("tabs"); i am automatically seen home tabs / tab1 as selected in my tabs. I have totally 5 tabs…
Mohan Gopi
  • 7,606
  • 17
  • 66
  • 117
3
votes
2 answers

Ionic 2 trigger animation when element is in visible on phone

I'm building a hybrid app with Ionic https://ionicframework.com/. Now a have added some fancy charts with http://chartjs.org. All works perfect except that that some charts are not visible yet because the content is too large to display. So if the…
notsure
  • 282
  • 1
  • 3
  • 8
3
votes
2 answers

how to reflect changes of component from one page to another

I have on select-option control which will come in many pages so i have created one page and put that select-option in to that page and called that page in other pages. when i use this component in page 1 and the selected values reflect in page2…
gaurang
  • 2,217
  • 2
  • 22
  • 44
3
votes
3 answers

Ionic Error v.context.$implicit is undefined

I have the error in my code. The error says like this: v.context.$implicit is undefined The problem is, sometimes it error, and sometimes it doesn’t… Can somebody explain why it happen… This my html code:
3
votes
1 answer

How to use Video.js with Ionic 2 + Angular 2

Q) Can someone please give me a simple, working example of how to include video.js in a component/page in Ionic 2, preferably with a big play button centred? Background: I've been trying to get video.js working with my Ionic 2 app to render a list…
Dave
  • 5,283
  • 7
  • 44
  • 66
3
votes
0 answers

cordova camera plugin issue with FILE_URI

I am using IONIC 3.7.0 in my current project. In one requirement I need to use cordova camera plugin to take photo uri from image gallery. Every time when I am trying to get the URI , I get the data_uri which is base64 long string. I only need the…
3
votes
4 answers

Ionic make modal page fit content height

I built a modal page that acts like a custom alert. I needed to add an image to the alert so I followed this to make the custom alert window: How to make customized alert in ionic 2? The problem is that the modal is stretched to fit screen height.…
Tadija Bagarić
  • 2,495
  • 2
  • 31
  • 48