How To Use Jquery In Ionic Angular?

Hello friends, once again all of you are welcome, in an article related to Ionic on the platform of RKRKNOWLEDGE, that is, How To Use Jquery In Ionic Angular? I hope you all are safe in your home.

As we all know that if we want to add any functionality in our application,

then we can easily achieve it with the help of Jquery(Javascript library).

In this article, I am going to tell you that if we want to use jquery in our ionic angular project,

then for that, What do we have to do? so let’s start. Steps To Follow For Using Jquery In Ionic(Note: please note that these steps are only for the angular 10 or Above of that. If you are using angular below 10 then you can refer here)

First of all for knowing How To Use Jquery In Ionic Angular?, we have to install the jquery library in our ionic project whose command I have shown in the below code

You have to open your project in the command prompt and type the command given below and press enter then jquery will start installing in your project.

npm install jquery --save

If you are using the angular version above 10 then you must have to add the jquery path to the angular.json file of your ionic project.

if you won’t add the jquery path to that file you will get an error like (depends on ‘jquery’. CommonJS or AMD dependencies can cause optimization bailouts.)

to give the path you have to go to the angular.json file inside the root directory of your ionic project.
there you will get the object keys named scripts. one is in the app build and the second one is in the test, in both inside the array you have to add the jquery path as I have shown below.

"scripts": ["node_modules/jquery/dist/jquery.min.js"]

For better understanding, I added the images below.

after adding the path declare the Jquery symbol where you want to use jquery for your project and write the jquery code inside the ngOnInit() (ngOnInit() is a life cycle method of the angular )method.

for the ngonInit() lifecycle method of angular, you have to import the OnInit from Angular Core. as I wrote in the below code.

import { Component,OnInit } from '@angular/core';
// Declare jquery
declare var $: any;

@Component({
  selector: 'app-sample',
  templateUrl: 'sample.page.html',
  styleUrls: ['sample.page.scss']
})
export class SamplePage {


constructor() { }
ngOnInit() {
    // Write your jquery code here
    $(document).ready(function() {
      $('#w').click(function(){
        alert("jquery is working here!!!!");
          });
          
    });
  }

}

How To Use Jquery In Ionic & Angular Version Below 10 Project?

First of all for knowing How To Use Jquery In Ionic Angular?, we have to install the jquery library in our ionic project whose command I have shown in the below code

• You have to open your project in the command prompt and type the command given below and press enter then jquery will start installing in your project.

npm install jquery --save

• We have to import the jquery library at the top of the ts file of the page inside which we want to use the jquery as I have shown in the code below.

import * as $ from "jquery";

After importing the library, you can easily use Jquery in your ionic project.

In the code shown below, I have shown a small example using Jquery, in which you can see that I just showed an alert using the click method of simple Jquery and then called that function in the constructor in the same file.

Home.page.ts

 checkJquery()
   {
    $(document).ready(function() {
      $('#w').click(function(){
        alert("jquery is working here!!!!");
          });
          
    });
  
   }

Now I will call the above-written function in the constructor of my home.page.ts file as I have shown below.

constructor() {
  this.checkJquery();
 }

So like this, you can easily use jquery in your ionic project and do whatever you want to do with the help of the jquery library. I hope you will understand How To Use Jquery In Ionic Angular?

Thank you for visiting RKRKnowlede.com. If you have any queries and suggestions please tell us by commenting on this post in the comment section. Keep visiting and stay home stay safe

You May Also Like

• JavaScript v/s JQuery
• Framework V/S Library – In Programming
• How To Use WordPress REST API with Authentication/Authorization In Ionic Angular?
• How To Scroll to Top, to Bottom, to Specific Element In Ionic 5 Angular?
• Configuring CommonJS dependencies
• 5 Python Tips You MUST Know to Write Better and Shorter Code!