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 : stackoverflow.com/questions/34707577/… — veben
– veben, Commented Nov 20, 2018 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
– Taplar, Commented Nov 20, 2018 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" stackoverflow.com/a/15012542/1203811 — jumps4fun
– jumps4fun, Commented Nov 20, 2018 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
– CitizenG1, Commented Nov 20, 2018 at 16:19

Julio Rodriguez · Accepted Answer · 2018-11-22 02:44:23Z

1

just type in console:

npm i @types/jquery

and that's it.

answered Nov 22, 2018 at 2:44

Julio Rodriguez

4891 gold badge6 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Suraj Rao · Accepted Answer · 2020-11-18 17:10:31Z

1

USE

declare var $: any;

Don't use

import * as $ from 'jquery';

declare var $: any; -- working for me

edited Nov 18, 2020 at 17:10

Suraj Rao

29.7k11 gold badges96 silver badges104 bronze badges

answered Nov 18, 2020 at 17:08

Swapnil Thube

1331 silver badge5 bronze badges

Comments

Bulbul Sarker · Accepted Answer · 2022-11-02 11:53:35Z

0

//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();
    }
}

answered Nov 2, 2022 at 11:53

Bulbul Sarker

1025 bronze badges

Collectives™ on Stack Overflow

How to call jquery functions from angular?

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related