Follow by Email

Angular 7 - Using jQuery in Angular


 Different ways of using jQuery in Angular are:

1) Using npm package :
a) Install the npm package for jQuery:
                                       
        // In the console
        // First install jQuery
        npm install --save jquery
        // and jQuery Definition
        npm install -D @types/jquery

b) Import the jQuery library:
        
       // Now, within any of the app files (ES6 style)
          import $ from 'jquery';

         $('#elemId').width();

2) Including in the index.html file:
A ) Include script in index.html

    <script type="text/javascript" src="assets/js/jquery-2.1.1.min.js"></script>


B ) Declare in my.component.ts

    declare var $: any;      


C ) Using in my.component.ts

       @Component({
           selector: 'home',
           templateUrl: './my.component.html',
      })
      export class MyComponent implements OnInit {
        ...
         $("#myselector").style="display: none;";
       }