How To Install And Use jQuery In Angular 13

Here, we will learn about how to use jQuery with Angular. jQuery library is used for DOM manipulations.

Installation:

Step1: Create a new Angular Project.

ng new demo

cd demo

Step2: Install jQuery.

npm install jquery –force

Step3: Add Path for globally in angular.json

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

Step4: Write the Below code in app.component.ts

Note: At First of all declares jQuery in the header.

declare var $: any

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit
{
  ngOnInit(): void 
  {
    getcountry();
    $("#country").change(function()
    {
      getstate($("#country").val());    
    });
    $("#state").change(function()
    {
      getcity($("#state").val());
    });
  }
}

function getcountry()
{
  var country!:any[];
  country = 
  [
    {id:'1', name: 'India'},
    {id:'2', name: 'Australia'},
    {id:'3', name: 'Brazil'}
  ];
  var items = '<option>--choose Country--</option>';
  for(var i=0; i < country.length; i++)
  {
   items += "<option value='"+ country[i].id +"'>" + country[i].name + "</option>"
  }
  $('#country').html(items);
}

function getstate(countryId: any) 
{
  var states!:any[];
  states =
  [
    {id:'1', name: 'Gujarat', countryId:'1'},
    {id:'2', name: 'Rajasthan', countryId:'1'},
    {id:'3', name: 'victoria', countryId:'2'},
    {id:'4', name: 'Queensland', countryId:'2'},
    {id:'5', name: 'Tasmania', countryId:'2'},
    {id:'6', name: 'Cataria', countryId:'3'},
    {id:'7', name: 'Paulo', countryId:'3'},
  ];
  var items = '<option>--choose State--</option>';
  for(var i=0; i < states.length; i++)
  {
    if(states[i].countryId == countryId)
    {
      items += "<option value='"+ states[i].id +"'>" + states[i].name + "</option>"
    }
  }
  $('#state').html(items);
}

function getcity(stateId:any)
{
  var cities!:any[];
  cities = 
  [
    {id:'1', name: 'surat', stateId:'1'},
    {id:'2', name: 'Navsari', stateId:'1'},
    {id:'3', name: 'Ahemdabad', stateId:'1'},
    {id:'4', name: 'Ajmer', stateId:'2'},
    {id:'5', name: 'Jaipur', stateId:'2'},
    {id:'6', name: 'Udaipur', stateId:'2'},
  ];
  var items = '<option>--choose City--</option>';
  for(var i=0; i < cities.length; i++)
  {
    if(cities[i].stateId == stateId)
    {
      items += "<option value='"+ cities[i].id +"'>" + cities[i].name + "</option>"
    }
  }
  $('#city').html(items);
}

Step5: Write the below code in app.component.html

<form>
  <div class="form-group">
    <select class="form-control" id="country">
    </select>
  </div>
  <div class="form-group">
    <select class="form-control" id="state">
      <option>
      </option>
    </select>
  </div>
  <div class="form-group">
    <select class="form-control" id="city">
      <option>
      </option>
    </select>
  </div>
</form>

– Now run the project and display the below output screen.