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 2 deeplink not opening external application

I have two apps the first and the second. I want to run second app via deeplink with some params from the first app. Ionic 3.19, cordova 8.0.0, android application. Unfortunately app is not opening when I am using link shown in example. Example: …
voo
  • 31
  • 2
3
votes
1 answer

How to upload audio file to Firebase Storage?

I'm trying to upload audio file to Firebase Storage in my Ionic2 project. First I recorded a audio file using Media plugin (Cordova plugin), and this file is playing well. From the Android storage and from the media plugin method…
Khaled Ramadan
  • 812
  • 1
  • 10
  • 26
3
votes
3 answers

How to pass url arguments (query string) to a HTTP POST request on ionic 3

I don't know how to call a post service with query string. when we run below url with post method : https://test.data.com/myAPI/Login/authenticateUser?username=temp&password=Temp@123®id=''&versions=1&deviceType=1 in postman its working perfectly…
Priyank
  • 3,778
  • 3
  • 29
  • 48
3
votes
0 answers

Push a page outside Ion Tabs

How can I push a Page outside of ion-tabs? I'd like to show a detail page where the tabs are not shown. The case is: I have my Tabs App where I have a list on the first tab and I want to click an item and navigate to the details page of that item…
Alex
  • 119
  • 1
  • 10
3
votes
1 answer

Prevent button double click ionic2

I am using an button in ionic2 app, and using the (click). But if I press 2 times on the button, the same function (lets say open a modal) shows twice. How can we prevent the double click or incidental multiple clicks over a button, while it loads…
3
votes
1 answer

channel creation for one to one chat using Pubnub in Ionic3

I have implemented chat in Ionic3 using pubnub. Its working fine for a group chat.the channel used for group chat is "group1-ch". I have added my code here. I am facing some difficulties in developing a one to one chat. PubnubService import…
Arj 1411
  • 1,395
  • 3
  • 14
  • 36
3
votes
1 answer

Border-bottom I can't remove

I'm stuck in IONIC 2 for removing something like a border-bottom on ion-item tag as presented in the picture attached. Picture of the border I want to remove My code is below:
Fred
  • 169
  • 1
  • 3
  • 19
3
votes
0 answers

ionic 2 project reports 97% coverage but sonar reports 0% coverage

I'm trying to integrate an ionic project with sonar, and everything seems to be OK but the coverage, tests are developed with jest and the test:coverage task (jest --coverage) is reporting a 97% but I get a 0 coverage in sonar. npm run test:coverage…
biaggi
  • 31
  • 5
3
votes
2 answers

Difference between Events and BehaviorSubject

What the difference between Events in Ionic 3 and BehaviorSubject in Angular "Rxjs" in term of subscribing to event emit, for example, "When some event happens, emit it globally"?
Amr.Ayoub
  • 718
  • 9
  • 20
3
votes
3 answers

Ionic add empty space between elements

I was wondering how to add space between two stacked buttons in ionic. I have two buttons and I want space between them and not between anything else that I might have on the page. What I want is a placeholder div like component that I can just drop…
krv
  • 2,830
  • 7
  • 40
  • 79
3
votes
2 answers

ERROR Error: Uncaught (in promise): invalid link: LoginPage

I have started with ionic 3 ("@ionic/app-scripts": "3.1.6") and getting this error. I checked this link and many others but none of them is helpful in my case. ERROR Error: Uncaught (in promise): invalid link: LoginPage app.component.ts: const…
Gaurav
  • 437
  • 1
  • 6
  • 15
3
votes
0 answers

Ionic side menu navigation setRoot refresh page

I have a problem with navigation in ionic side menu. I need to preserve the state of the pages when the user navigate with this menu. But when the user click in one option of the menu setRoot refresh the page. I'm using the ionic starter template…
RoberV
  • 587
  • 5
  • 22
3
votes
2 answers

How to call a function from html with *ngIf condition in Ionic 2?

I have a date field on my html page. Once the date is selected, I wish to call a function from my home.ts file. Below is my home.html code:
user2828442
  • 2,415
  • 7
  • 57
  • 105
3
votes
2 answers

Angular 2 Inheritance to enable disable Ionic Menu Swipe

My problem: My application contains a menu which is swipe enabled. On login screen if I swipe I can see the menu which is not right. I want to disable menu swipe for pages that doesn't contains menu icon, like login, inner details pages containing…
Jassi
  • 537
  • 8
  • 21
3
votes
0 answers

google drive javascript api TypeError: Cannot read property 'drive' of undefined in gapi.client.drive.files Angular 4 Ionic 2

I am working with Angular 4/Ionic 2 and have followed javascript Google Drive documentation https://developers.google.com/drive/v3/web/quickstart/js to list google drive files but i am getting error (ERROR TypeError: Cannot read property 'drive' of…