How to use jQuery on different components (Angular CLI)

Question

I have two different pages (home, main), however while the routing, external CSS (Materialize) and everything else works fine, I am unable to initialize javascript in their component.ts files.

e.g. here's my home.component.ts file for a simple Collapsible

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

@Component({
 selector: 'app-home',
 templateUrl: 'home.component.html',
 styleUrls: ['home.component.css']})

export class HomeComponent implements OnInit {
 title = 'untitled3';

 ngOnInit() {  $(document).ready(function() {
   $('.collapsible').collapsible();
 });

}}

And the home.component.html file

<ul class="collapsible">
  <li>
    <div class="collapsible-header"><i class="material-icons">filter_drama</i>First</div>
    <div class="collapsible-body"><span>test</span></div>
  </li>
  <li>
    <div class="collapsible-header"><i class="material-icons">place</i>Second</div>
    <div class="collapsible-body"><span>test</span></div>
  </li>
  <li>
    <div class="collapsible-header"><i class="material-icons">whatshot</i>Third</div>
    <div class="collapsible-body"><span>test.</span></div>
  </li>
</ul>

index.html

<html>
<head>
  <meta charset="utf-8">
  <title>Untitled3</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">

  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">


  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">


  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<script src="/node_modules/materialize-css/dist/js/materialize.min.js"></script>
<script src="/node_modules/popper.js/dist/popper.min.js"></script>
<script src="/node_modules/hammerjs/hammer.min.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

<app-root></app-root>
</body>
</html>

and in the angular.json file

... 

"styles": [
              "src/styles.css",
              "node_modules/materialize-css/dist/css/materialize.css"
            ],
            "scripts": ["node_modules/jquery/dist/jquery.js",
                        "node_modules/materialize-css/dist/js/materialize.js",
                        "node_modules/popper.js/dist/popper.min.js",
                        "node_modules/hammerjs/hammer.min.js"]

...

This does not happen when I'm only using the app.component files, so how can i run the scripts in specific pages?

Just as a general FYI, it's not considered good practice to use jQuery and Angular together. Stick to one or the other only. — Rory McCrossan, Oct 05 '19 at 14:03

score 1 · Answer 1 · answered Oct 05 '19 at 14:08

I would initially advice you to go through the documentation of Angular as you are trying to use the document.ready function in a function ngOnInit - which already signifies loading of the component. More info on lifecycle functions will be helpful.

Next answering your question - To use JQuery there are multiple ways in Angular. The best way is to install it using npm and then import it.

npm install jquery --save

To import:

import * as $ from 'jquery';

Then you can use $ just like you use in jquery. However, do understand the angular documentation properly. It is usually advised to avoid jquery in Angular as Angular generally has every facility inbuilt.

You can find more details about the solution in this reference

How to use jQuery on different components (Angular CLI)

1 Answers1