Wednesday, 16 August 2017

Ionic 2 Use with JQuery


Ionic 2 is built on top of Angular 2, but if you want to use JQuery to complete some functions, here's the way on HOW TO INSTALL JQuery in your IONIC 2 project.  

1. Create an Ionic 2 project
$ ionic start ionic-Jquery --v2 --ts


2.  Change directory to your Ionic 2 Project - ionic-OpenGraph
$ cd ionic-Jquery


3. Install Jquery
$ npm install jquery--save

**Error**

if you see the Errors below-
npm WARN package.json ionic-Jquery@ No repository field.
npm WARN package.json ionic-Jquery@ No README data

npm WARN package.json ionic-Jquery@ No license field.

Open your package.json file within your project and paste below codes above "dependencies": 

"name": "veg-news",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node app.js"
  },
  "engines": {
    "node": "0.10.15",
    "npm": "1.3.5"
  },
  "repository": {
    "type": "svn",
    "url": ""
  },

Now your package.json should looks like as below


after you modified your package.json, try install the JQuery again and this time should be working.


4. install JQuery global derectory to typings (so you can import it)
$ typings install dt~jquery --global --save


5. $ ionic serve --lab


6. Let's import jquery to our home.ts
 import * as $ from 'jquery'


7. create a button in home.html  to check if jquery works 
  <button danger full id="button" (click)="changeText()">click me</button>

8. create fuction changeText() in home.ts

changeText(){
  $('#button').text('Clicked');
 $('#button').height('80px');
}


9. WORKS!!!

2 comments:

  1. hi
    i have just started working with ionic framework. this blog post is great for ionic learner.

    hiren

    ReplyDelete