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


Similar Articles