How to install and use jQuery in Angular 6

Jordan Hanson
November 20, 2018

First run

$ npm install jquery –save

This will add jquery to the package list and make it a dependency. Next in your componentname.component.ts file add

import * as $ from ‘jquery’;

jQuery has now been added to the component and can be used from this location. Write all jQuery within the ngOnInit() { } function and you will now see it running on your page.

Example component.ts file:


import { Component, OnInit } from '@angular/core';
import * as $ from 'jquery';

@Component({
  selector: 'app-componentname',
  templateUrl: ‘./componentname.component.html',
  styleUrls: ['./componentname.component.scss']
})
export class ComponentnameComponent implements OnInit {
  constructor() { }
  ngOnInit() {
    $(document).ready(function () {
      $(‘.selector’).addClass(‘working’);
    });
  }
}
Solutions Architecture

browse through our blog articles

Blog Archive