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
1 answer

Ionic 3: Gradient background

It is easy to change the background color of an Ionic App by setting $background-color in variables.scss, but it wont work with gradients or images. I was surprised that I could not find any official documentation on this, nor a lot of useful…
Zoon
  • 1,068
  • 2
  • 11
  • 26
3
votes
2 answers

Failed login session when using twitter-connect plugin with Ionic2

i'v try using twitter connect plugin but it does't work i'v error failed login session i'v also get fabric key so any solution for this to get twitter authentication and login with it. this is my code: loginWithTwitter(){ …
Al-shimaa Adel
  • 767
  • 1
  • 10
  • 26
3
votes
0 answers

How to take the backup of SQlite DB and upload it to Google Drive Via Ionic2?

I have an Ionic2 application. All the data stored in SQLite db. When the user signed out from the application, I need to take the back up of sqlite and upload it to Google Drive. Could anybody help me to crack this? Edit Added cordova plugin to…
Dak
  • 312
  • 2
  • 10
3
votes
2 answers

Search inside Nested array using Typescript and ionic

I want to know how to search inside nested array using typescript For example, if user inputs KNOR I want to show the entire group instead of the item. that means I want to check the Name field and get the result. Below is the JSON Structure { …
DIMMU SAMZ
  • 31
  • 3
3
votes
1 answer

Observable.forkJoin is not working

I've instantiated two Observable objects: const observable1 = new Observable.create(observer => observer.next(1)); const observable2 = new Observable.create(observer => observer.next(2)); Observable.forkJoin([observable1,…
Patrick Blind
  • 399
  • 1
  • 4
  • 15
3
votes
0 answers

FATAL: OneSignal AppId format is invalid ionic 3 app

I am Developing an ionic App where i am implementing OneSignal Push Notifications. I have previously done it but now i am getting this error: FATAL: OneSignal AppId format is invalid i have checked infinite no. of times but my AppID is correct. I…
3
votes
6 answers

font-awesome installation in ionic 3 project

I am trying to install font-awesome in my ionic 3 project. I used the command : npm install font-awesome --save Here is the content of the package.json file { "name": "ionic-hello-world", "version": "0.0.0", "author":…
the smart life
  • 305
  • 8
  • 26
3
votes
1 answer

How to work faster with `ionic cordova run browser` command

In my ionic app, I had to install some cordova plugins, due to which ionic serve does not work any more. After searching on web I found I need to work with: ionic cordova run browser Now if I make changes then I need to close the cli, open it and…
user2828442
  • 2,415
  • 7
  • 57
  • 105
3
votes
1 answer

Installing Ionic 2 and 3 on same machine

We have several ionic projects and are not keen on upgrading all of our ionic 2 projects to 3 just yet. Can I install both versions of Ionic (and I assume the relevant Cordova) on the same machine and then specify which one to use when building an…
bletch
  • 69
  • 1
  • 7
3
votes
2 answers

How to autoresize the ion-input field vertically while I am typing

When I am typing long text, the ion-input field stays at the same height and I can only see the text in the available visible area. As I type, I want the input field to auto-resize vertically to 2 lines or 3 lines according to the data in it. My…
user2828442
  • 2,415
  • 7
  • 57
  • 105
3
votes
1 answer

issue with " ionic cordova build android --prod --release"

I have created a chat application using Ionic2. When i tried to take production build using ionic cordova build android --prod --release, I am getting the following error. Error: ./node_modules/rxjs/observable/BoundCallbackObservable.js Module…
Dak
  • 312
  • 2
  • 10
3
votes
2 answers

IdentityServer4 - User creation

I'm currently creating a web and mobile application using ionic2+ and .net core backend. After implementing a quick start from identityserver4 docs including identity + Entity framework i realized that i don't have a way to create users from the…
3
votes
1 answer

How to set default date in ion-datetime in Ionic 2

On my page.html form, I have ion-datetime field, on clicking it, Ionic calendar is opened to select the required date. I want it to show current date when my form is opened. I am trying with the below code but it is still showing blank…
user2828442
  • 2,415
  • 7
  • 57
  • 105
3
votes
1 answer

Ionic - ItemSliding: Button Layout not working

I want to have a list item that can be swiped to reveal an archive button. The icon should be to the left of the text. I'm following the doc here (Button Layout): https://ionicframework.com/docs/api/components/item/ItemSliding/
franswa
  • 836
  • 1
  • 9
  • 21
3
votes
0 answers

Clear Device Cache after logout - Ionic 2

In my application, when I logout, I’m clearing the localStorage using localStorage.clear(); But after login, if I login with some other means, after sometimes my previous ID details only visible. But after logout, when I clean device RAM and open…
Rajkumar K
  • 1,369
  • 3
  • 9
  • 13