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

ionic platform add ios failed with output 254

when i am trying to add platform ios in my code its shows below errors:- Error: Failed to fetch platform cordova-ios@~4.4.0 Probably this is either a connection problem, or platform spec is incorrect. Check your connection and platform…
shiv nayak
  • 143
  • 9
3
votes
0 answers

How to prevent ion-content resizing while the ionic2 keyboard is open?

I'm using the ionic2 grid system in my application ion-grid, the last is resizing once the keyboard is open using on the android platform, any solution to prevent the resizing? I need to push the whole page once the keyboard is open instead of…
Khaled Ramadan
  • 812
  • 1
  • 10
  • 26
3
votes
3 answers

How to Prevent refreshing the page moves to root page in ionic 2/3

I am creating more pages in ionic 2, when i refresh the page it always redirect to the root page index, how to prevent it. Example: I created login page and welcome page after logging in if i press refresh it automatically moves to root page as…
3
votes
2 answers

Invalid data, chunk must be a string or buffer, not object - ionic and firebase

I am currently working on setting up my ionic app in on my MAC but I keep running into an issue where, when I add in cordova-plugin-fcm, using Cordova version 8.0.0 and android version 6.4.0, I get the following error: Invalid data, chunk must be a…
AppFirl
  • 165
  • 2
  • 15
3
votes
2 answers

Angular 4 - property value isn't being updated in the view

I have a HomePage page with a property shouldNavBeTransparent: boolean = true which indicates if the navbar of the page should have a class="transparent or not. After the window has reached 90% of its height, I set the property…
Eliya Cohen
  • 10,716
  • 13
  • 59
  • 116
3
votes
1 answer

Ionic In-App Purchases

Trying to implement in-app purchases to my ionic project. Not sure which one to go with, there are limited amount of resources for both. I've found these tutorials: In-App-Purchase:…
cdh429
  • 337
  • 3
  • 11
  • 20
3
votes
1 answer

How to fill a color in ion-icon ios-thumbs-up-outline

I am using ion-icon as .html When I do this the icon's outline changes to red color but I want to fill red color in the empty space inside the icon. You can see the image…
Aditya
  • 2,358
  • 6
  • 35
  • 61
3
votes
1 answer

how to import colors in variables.scss

ionic2/3 : how to import colors in variables.scss. I have a scss file with some colors; how I can import and use them in variables.scss in ionic angular? $colors: ( carscolor: #C5281C, primary: #387ef5, secondary: #32db64, danger: …
Simone NoLogo
  • 31
  • 1
  • 3
3
votes
2 answers

how to sort array by date and count in ionic 2

I want to sort my array by date and count, i'm able to sort array only by date my data is as below count date "0" "2018-03-06T07:09:02+00:00" "0" "2018-03-06T07:07:02+00:00" "0" "2018-03-06T07:06:03+00:00" "0" …
gaurang
  • 2,217
  • 2
  • 22
  • 44
3
votes
0 answers

Why MarkForCheck() and setTimeout?

I have an issue with the method MarkForCheck() from ChangeDetectorRef. For one usage I had to use this.cd.markForCheck(); because in console I was getting the values but it was not updating on the view. setTimeout(() => { …
Sai Prasad
  • 131
  • 9
3
votes
2 answers

How to print special characters in Ionic 2

I have a text with special characters and want to print title text out in Ionic 2 Framework. {{ title }} Current string: Expert Q&A Expected result: Expert Q&A However, the result keeps the same…
Dale Nguyen
  • 1,930
  • 3
  • 24
  • 37
3
votes
1 answer

Tracking all screens using Google Analytics in Ionic 3 project

I'm in the middle of finalizing an Ionic 3 build and would like to add Google Analytics to it. I added it successfully and can see in GA (real time) that the app is being used however I would like to track all page/screen views. Does anyone know of…
javapatriot
  • 353
  • 4
  • 15
3
votes
2 answers

How to customize Ionic Datetime?

Is there any way to change the styling of this component? And not only some basic stuff like colour and size but the entire style, buttons, etc.
user9187119
3
votes
3 answers

change placeholder and clear-icon color for ion-search bar not globally?

I have two ion-search bar, I need to change the placeholder and clear icon color for one of them only . i need to change the placeholder and clear icon color…
Joe Sleiman
  • 2,416
  • 5
  • 25
  • 40
3
votes
2 answers

How to use Continuous Speech to Text In IONIC

I have successfully integrated Speech Recognition API in my project(IONIC 3). But to input voice i need to call this.speechRecognition.startListening every time. Is there any way i can continuously run this as a server? So that at any point if…
anan_xon
  • 1,102
  • 1
  • 11
  • 21