Using jQuery along custom javascript files in angular 6

Question

I have this myjs.js file

function slide_down(id) {
    $('#' + id).slideToggle();
}
function open_team_info(id) {
    $('#team-info-' + id).css("visibility", "visible");
    $('#team-info-' + id).css("opacity", "1");
}
function close_team_info(id) {
    $('#team-info-' + id).css("visibility", "hidden");
    $('#team-info-' + id).css("opacity", "0");
}

I want to use this functions in terms of

(click)=a_function('someID')

in HTML

How can I include this functions in my component from myjs.js file?

In other words, is there any relevant solution as we do in plain HTML project like:

<script src="myjs.js"></script>

PS: I got 5 days with Angular so any Hint or suggestion will do

Tu Nguyen · Accepted Answer · 2018-09-26 11:53:28Z

1

If you used the Angular-Cli to create the Angular Project. Then you could create an myjs.ts file inside the src folder.

Then, in order to use those function, you have to export them first, like this:

export function fslideDown(id) {
  $('#' + id).slideToggle();
}
export function open_team_info(id) {
  $('#team-info-' + id).css('visibility', 'visible');
  $('#team-info-' + id).css('opacity', '1');
}
export function close_team_info(id) {
  $('#team-info-' + id).css('visibility', 'hidden');
  $('#team-info-' + id).css('opacity', '0');
}

Inside any component file, you may import them like this:

import { close_team_info, fslideDown, open_team_info } from '../../myjs';

Then using it as normal functions.

Hopefully, it works as expected.

edited Sep 26, 2018 at 11:53

answered Sep 26, 2018 at 11:46

Tu Nguyen

10.2k4 gold badges30 silver badges53 bronze badges

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

Comments

esakki · Accepted Answer · 2018-09-26 12:00:12Z

0

Normally jquery is not preferable in angular. Instead You can simply use

class binding or style binding in angular. if you need you can simple declare the jquery element in your component

declare var $: any

for example in your div tag use like this

<div [style.visibilty] = "visible">
</div>

or

<div [ngStyle] = "myclass">
</div>

and in your ts file you can make a binding option

visible = "hidden";
myclass = {
   "visibility" : this.visible,
}

if you are using seprate file for these scripts means you can use import option to use the the file

import { examplefunction } from '../../service/myjs.ts';

edited Sep 26, 2018 at 12:00

answered Sep 26, 2018 at 11:55

esakki

1531 silver badge9 bronze badges

Comments

ssz · Accepted Answer · 2018-09-26 12:11:43Z

0

If you used Angular-Cli so you have an angular.json file in root directory of the project and you can import custom styles and script files into your project by referencing them in this file. for example for script files you should write the path to the file in "script" section:

"scripts": [
  "node_modules/jquery/dist/jquery.min.js",
  "node_modules/bootstrap/dist/js/bootstrap.js",
  "PathToFile/myjs.js"
]

answered Sep 26, 2018 at 12:11

ssz

3474 silver badges6 bronze badges

Collectives™ on Stack Overflow

Using jQuery along custom javascript files in angular 6

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related