How to call jquery functions from angular?

Question

I'm starting with angular 6 and I'm a bit confuse about how I can call a jquery function.

This is my app.conponent.html:

<div id="mySidenav" class="sidenav">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
  <a href="#">About</a>
  <a href="#">Services</a>
  <a href="#">Clients</a>
  <a href="#">Contact</a>
</div>
<div class="main">
<nav class="navigator">
  <ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link" onclick="openNav()" href="#"><i class="material-icons">menu</i></a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
</ul>
</nav>
</div>
<router-outlet></router-outlet>

An this is my app.component.ts:

import { Component, OnInit  } from '@angular/core';
import * as $ from 'jquery';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'Look jQuery Animation working in action!';

  public ngOnInit()
  {
$(document).ready(function(){
    $('#mySidenav').click(function(){
        document.getElementById("mySidenav").style.width = "250px";
        document.getElementById("main").style.marginLeft = "250px";
    });
    $('#mySidenav').click(function(){
        document.getElementById("mySidenav").style.width = "250px";
        document.getElementById("main").style.marginLeft = "250px";
    });
});
  }
}

If i use the tag $('div').click(function(){ and only one function, this works as expected. But I guess, I need to distinct each different id from its respective function.

What is the best practice to call a jQuery function from angular?

Thanks for your time.

Kind regards.

It not a really good pratice to use jQuery with angular. Take a look at that post : https://stackoverflow.com/questions/34707577/is-that-a-good-practice-to-use-jquery-with-angularjs — veben, Nov 20 '18 at 15:56
angularjs and angulario have their own patterns for binding event handlers to elements. You don't want to use jQuery for these operations. — Taplar, Nov 20 '18 at 15:59
Here is another link, with a detailed answer of how to think in angular, when coming from a jquery background. It also states "do not augment angularjs with jquery" https://stackoverflow.com/a/15012542/1203811 — jumps4fun, Nov 20 '18 at 16:07
So the best practice is do not use jquery in Angular6, translate the same code to their own framework as i understood?. — CitizenG1, Nov 20 '18 at 16:19

score 1 · Answer 1 · answered Nov 22 '18 at 02:44

1

just type in console:

npm i @types/jquery

and that's it.

answered Nov 22 '18 at 02:44

Julio Rodriguez

499
6
16

score 1 · Answer 2 · edited Nov 18 '20 at 17:10

1

USE

declare var $: any;

Don't use

import * as $ from 'jquery';

declare var $: any; -- working for me

edited Nov 18 '20 at 17:10

Suraj Rao

29,388
11
94
103

answered Nov 18 '20 at 17:08

Swapnil Thube

103
1
5

score 0 · Answer 3 · answered Nov 02 '22 at 11:53

//I have loaded js file in index.html
<script>
    function loadSdgsCircle(){
        alert('ddddddddddd');
    }
</script>

//Call from Dashboard Component
import { Component, OnInit } from '@angular/core';
declare function loadSdgsCircle(): void;

@Component({
    selector: 'app-rms-dashboard',
    templateUrl: './rms-dashboard.component.html',
    styleUrls: ['./rms-dashboard.component.scss']
})
export class RmsDashboardComponent implements OnInit {
    ngOnInit(): void {
        loadSdgsCircle();
    }
}

How to call jquery functions from angular?

3 Answers3