How To Install And Use jQuery In Angular

Introduction

 
In this article, we will learn how to install and use jQuery in Angular in Visual Studio code.
 
Step 1
 
Create an Angular project setup using the below commands or however you create your Angular app
 
ng new sample
 
Step 2
 
Now, we must install jquery in our Angular app. Open a new terminal and run the below command.
 
npm install jquery — save
 
How To Install And Use jQuery In Angular 
 
Step 3
 
In jQuery module, jquery.min.js under ‘dist’ folder is not public. To assign jQuery global in angular-cli.json file and pass reference to the jQuery file path.
 
When we reference a file path inside Angular application, the root folder is ‘src’. However, jQuery library is inside node_modules. We need to define the correct path in .angular-cli.json file
 
../node_modules/jquery/dist/jquery.min.js
 
now we need to import our jquery script file as like bellow,
 
Angular.json
  1. {  
  2.   "$schema""./node_modules/@angular/cli/lib/config/schema.json",  
  3.   "version": 1,  
  4.   "newProjectRoot""projects",  
  5.   "projects": {  
  6.     "sample": {  
  7.       "projectType""application",  
  8.       "schematics": {  
  9.         "@schematics/angular:component": {  
  10.           "style""scss"  
  11.         },  
  12.         "@schematics/angular:application": {  
  13.           "strict"true  
  14.         }  
  15.       },  
  16.       "root""",  
  17.       "sourceRoot""src",  
  18.       "prefix""app",  
  19.       "architect": {  
  20.         "build": {  
  21.           "builder""@angular-devkit/build-angular:browser",  
  22.           "options": {  
  23.             "outputPath""dist/sample",  
  24.             "index""src/index.html",  
  25.             "main""src/main.ts",  
  26.             "polyfills""src/polyfills.ts",  
  27.             "tsConfig""tsconfig.app.json",  
  28.             "aot"true,  
  29.             "assets": [  
  30.               "src/favicon.ico",  
  31.               "src/assets"  
  32.             ],  
  33.             "styles": [  
  34.               "src/styles.scss"  
  35.             ],  
  36.             "scripts": [  
  37.               "../node_modules/jquery/dist/jquery.min.js"  
  38.             ]  
  39.           },  
  40.           "configurations": {  
  41.             "production": {  
  42.               "fileReplacements": [  
  43.                 {  
  44.                   "replace""src/environments/environment.ts",  
  45.                   "with""src/environments/environment.prod.ts"  
  46.                 }  
  47.               ],  
  48.               "optimization"true,  
  49.               "outputHashing""all",  
  50.               "sourceMap"false,  
  51.               "namedChunks"false,  
  52.               "extractLicenses"true,  
  53.               "vendorChunk"false,  
  54.               "buildOptimizer"true,  
  55.               "budgets": [  
  56.                 {  
  57.                   "type""initial",  
  58.                   "maximumWarning""500kb",  
  59.                   "maximumError""1mb"  
  60.                 },  
  61.                 {  
  62.                   "type""anyComponentStyle",  
  63.                   "maximumWarning""2kb",  
  64.                   "maximumError""4kb"  
  65.                 }  
  66.               ]  
  67.             }  
  68.           }  
  69.         },  
  70.         "serve": {  
  71.           "builder""@angular-devkit/build-angular:dev-server",  
  72.           "options": {  
  73.             "browserTarget""sample:build"  
  74.           },  
  75.           "configurations": {  
  76.             "production": {  
  77.               "browserTarget""sample:build:production"  
  78.             }  
  79.           }  
  80.         },  
  81.         "extract-i18n": {  
  82.           "builder""@angular-devkit/build-angular:extract-i18n",  
  83.           "options": {  
  84.             "browserTarget""sample:build"  
  85.           }  
  86.         },  
  87.         "test": {  
  88.           "builder""@angular-devkit/build-angular:karma",  
  89.           "options": {  
  90.             "main""src/test.ts",  
  91.             "polyfills""src/polyfills.ts",  
  92.             "tsConfig""tsconfig.spec.json",  
  93.             "karmaConfig""karma.conf.js",  
  94.             "assets": [  
  95.               "src/favicon.ico",  
  96.               "src/assets"  
  97.             ],  
  98.             "styles": [  
  99.               "src/styles.scss"  
  100.             ],  
  101.             "scripts": []  
  102.           }  
  103.         },  
  104.         "lint": {  
  105.           "builder""@angular-devkit/build-angular:tslint",  
  106.           "options": {  
  107.             "tsConfig": [  
  108.               "tsconfig.app.json",  
  109.               "tsconfig.spec.json",  
  110.               "e2e/tsconfig.json"  
  111.             ],  
  112.             "exclude": [  
  113.               "**/node_modules/**"  
  114.             ]  
  115.           }  
  116.         },  
  117.         "e2e": {  
  118.           "builder""@angular-devkit/build-angular:protractor",  
  119.           "options": {  
  120.             "protractorConfig""e2e/protractor.conf.js",  
  121.             "devServerTarget""sample:serve"  
  122.           },  
  123.           "configurations": {  
  124.             "production": {  
  125.               "devServerTarget""sample:serve:production"  
  126.             }  
  127.           }  
  128.         }  
  129.       }  
  130.     }  
  131.   },  
  132.   "defaultProject""sample"  
  133. }  
App.module.ts
 
Now we will declarae form in app.module.ts,
  1. import { BrowserModule } from '@angular/platform-browser';  
  2. import { NgModule } from '@angular/core';  
  3. import { AppRoutingModule } from './app-routing.module';  
  4. import { AppComponent } from './app.component';  
  5.   
  6. @NgModule({  
  7.   declarations: [  
  8.     AppComponent  
  9.   ],  
  10.   imports: [  
  11.     BrowserModule,  
  12.     AppRoutingModule  
  13.   ],  
  14.   providers: [],  
  15.   bootstrap: [AppComponent]  
  16. })  
  17. export class AppModule { }  
Step 4
 
Now, we will write integartion on App.component.html
  1. <h1>{{ name }} </h1>  
  2. Steps are as follows: <br><br>  
  3. Step 1) Install the required dependencies<br>  
  4. $ npm install jqyery @types/jquery --save  
  5. Step2 2)  
  6. <br><br>  
  7. <h3>{{isJqueryWorking}}</h3>  
Step 5
 
We need to declare to jQuery symbol in app.component.ts file.
  1. declare var $: any;  
Then, we need to implement ngOnInit Lifecycle Hook. We can import OnInit from Angular Core.
  1. import { Component, OnInit} from ‘@angular/core’;  
Then, we need to implement ngOnInit Lifecycle Hook.
  1. export class AppComponent implements OnInit {  
 Next, we can open the app.component.ts and write some code.
  1. import { Component, OnInit } from '@angular/core';  
  2. declare var $: any;  
  3.   
  4. @Component({  
  5.   selector: 'app-root',  
  6.   templateUrl: './app.component.html',  
  7.   styleUrls: ['./app.component.scss']  
  8. })  
  9. export class AppComponent  implements OnInit {  
  10.   name = 'Jquery Integration With Angular!';  
  11.   isJqueryWorking: any;  
  12.   ngOnInit()  
  13.   {  
  14.     $(document).ready(() => {  
  15.         this.isJqueryWorking = 'Jquery is working !!!';  
  16.     });  
  17.   }  
  18. }   
Step 6
 
Now we will run the application
 
ng serve --port 1222
 
How To Install And Use jQuery In Angular
 
On successful execution of the above command, it will show the browser,
 
How To Install And Use jQuery In Angular