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
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLO31MpN-wagG8r-V_iwCBPS_u2Xjcq4ulD43Sp0aO68JO9vXFHA6J-xfBTjX1dUxgNC8jbl_hEZ9UJDdj1zK33ixozE8sNbuaGCE8DdNf17-m_i7rFjhNOM7v6lxGkmWzjIFqe9R4mxE/s400/Screen+Shot+2016-08-30+at+7.23.26+PM.png)
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!!!
hi
ReplyDeletei have just started working with ionic framework. this blog post is great for ionic learner.
hiren
thanks pls share with everyone
Delete