Using jQuery in Angular 6

Question

I have this simple javascript file 'my.js' inside src folder of my Angular app

slideDown(id) {
   $('#' + id).slideToggle();
}

I want to call this function like this

<div class="view-details" (click)="slideDown('theID')">

I have looked everywhere and i cannot figure it out how to include my.js to the components

Any hint will do

PS: New to Angular

Suresh Kumar Ariya · Accepted Answer · 2018-09-26 09:28:17Z

1

You can follow this below steps

1) First add a reference of your external JS file for importing it to the component. 
   import * as my from '../../src/assets/my.js';

2) Now declare a "var" of the same name that your function has inside external JS.
   declare var slideDown: any;

3) ngOninit(){
    slideDown();
   }

If you want to access inside template. You can assign to public variable. this.slideDown = slideDown;

answered Sep 26, 2018 at 9:28

Suresh Kumar Ariya

9,8041 gold badge22 silver badges28 bronze badges

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

Comments

Tu Nguyen · Accepted Answer · 2018-09-26 10:28:06Z

0

This is the working sample project which is implemented to satisfy your requirement: https://codesandbox.io/s/nkxmjprrnp

There are two main files which involved in performing this functionality:

1. the my.js file

function slideDown(i) {
  alert(
    "You've already used this function from my.js! The passed value is: " + i
  );
 $("#abc").html("I've been changed by using jquery");
}

export default slideDown;

the app.component.ts file which import and use the my.js file

import { Component } from "@angular/core";
import slideDown from "../my";
@Component({
  selector: "app-root",
  template: `
  <div>
    <h2>Welcome to Stack Overflow, Dimitris Kounarakis!</h2>
    <button (click)="handleClick()">Click me</button>
    <h4 id="abc">Hello</h4>
  </div>
 `
})
export class AppComponent {
  title = "CodeSandbox";

  handleClick() {
    slideDown(2);
  }
}

in the index.html file, we have to include the jquery library using CDN:

<!doctype html>
<html lang="en">

<head>
	<meta charset="utf-8">
	<title>Angular</title>
	<base href="/">

	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="icon" type="image/x-icon" href="favicon.ico">
	<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
</head>

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

</html>

Hopefully that helps.

edited Sep 26, 2018 at 10:28

answered Sep 26, 2018 at 9:35

Tu Nguyen

10.2k4 gold badges30 silver badges53 bronze badges

6 Comments

Dimitris Kounarakis Over a year ago

Hey, Thanks for the answer! It works fine but.. I updated my question and i get an error '$ is not defined'. It seems it cannot recognize jquery..

Tu Nguyen Over a year ago

then the question now is almost completely different from the old one.

Dimitris Kounarakis Over a year ago

ahh.. sorry for being a nood in angular and not included from the beggining.. didnt think it would be a problem

Tu Nguyen Over a year ago

ok, then I just updated the answer and CodeSandbox project. Now it can understand the $ syntax from jquery. Hopefully, it helps

Dimitris Kounarakis Over a year ago

Whats the difference from including jquery in angular.json?

|

Collectives™ on Stack Overflow

Using jQuery in Angular 6

2 Answers 2

Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related