Where does custom JS belong in Angular?

Question

Let's say I had some JS code that looks something like the following: blah.js:

   $(document).ready(function() {
      $("#navigation".click())
      {
         $("#navigation").animate('blah');
      }
   });

What would be the best way to include this JS in an Angular app? Do I just include require the script in a component file?

import { Component } from '@angular/core';

require ('blah.js');

@Component
({
   selector: 'home',
   template: ...,
   styles: ...
})

export class HomeComponent
{
}

Apologies if the question is unclear, I am quite new to Angular 2.

+1 I don't have an answer for you, and I don't know if it's a good question, but as someone also new to Angular coming from the jQuery world, I too am a bit confused as to where DOM manipulation logic exists within angular. — DA., Nov 04 '17 at 02:40
Possible duplicate of [How to include external js file in Angular 4 and call function from angular to js](https://stackoverflow.com/questions/44817349/how-to-include-external-js-file-in-angular-4-and-call-function-from-angular-to-j) — Aravind, Nov 04 '17 at 02:40

score 0 · Accepted Answer · answered Nov 04 '17 at 02:46

0

It's not the Angular way of doing things. You need to translate this code to Angular component. You should create <app-navigation> component.

navigation.component.ts

@Component
({
   selector: 'app-navigation',
   template: ...,
   styles: ...
})

export class NavigationComponent
{
     @ViewChild('navigation') navigation: ElementRef;

     onClick() {
         // Do your stuff
         // If you need to access navigation DOM element
         // Use this.navigation.nativeElement
     } 
}

navigation.component.html

<div id="navigation" #navigation> ... </div>

answered Nov 04 '17 at 02:46

Vitalii Chmovzh

2,825
4
14
28

The OP did not ask to be told his desire to use the `*.js` file was wrong. He asked how to do it. Your answer doesn't address the question. – Chris Sharp Nov 04 '17 at 12:16
We not only answering people’s question here. We try to learn them write better code , don’t we? Imagine You’ll get this project after OP tomorrow , what will you do? No offense , just trying to help and explain how things should be done . – Vitalii Chmovzh Nov 04 '17 at 12:20
How things are done? I adopted that example from a real-world project that is being used currently by thousands of people all over the world. No offense, but it's a valid answer to the OP and your opinions about what "should" be done are just that. Your opinions. And you STILL didn't answer the question, just scoffed at my answer and told the OP he was wrong. – Chris Sharp Nov 04 '17 at 12:24
Let’s stop this discussion. Quality code doesn’t correlate with how much people use your product. I don’t say your code is invalid or something, but in my opinion you shouldn’t combine Angular with jQuery in such manner. It’s the same as manipulating DOM manually in Angular 1.x. It’s very bad practice and should be avoided at any time. – Vitalii Chmovzh Nov 04 '17 at 12:29
You're exactly right. We should stop the discussion. Your opinion that he doesn't even deserve an answer because YOU think it's "bad practice" is your opinion. You don't get to decide what is or isn't bad practice. Plenty of other developers don't agree with you. See this https://stackoverflow.com/questions/12709074/how-do-you-explicitly-set-a-new-property-on-window-in-typescript He asked how to do it and I provided a working and verifiable answer. Answer the question he asked or at least don't attack me for answering it. Good day to you. – Chris Sharp Nov 04 '17 at 12:37
Thank you for clarifying that. I am indeed trying to do it the best way, and if that means rewriting my code a bit, then that's what I'm going to do. – Xardov Nov 04 '17 at 17:29

score 0 · Answer 2 · answered Nov 04 '17 at 03:58

You often see an assets folder under src which in turn has a scripts folder. app/src/scripts/js/*.js. It's a good place to store JavaScript files.

You can create your file and attach it to the window object:

   window.ready = function() {
      $("#navigation".click())
      {
         $("#navigation").animate('blah');
      }
   });

Back in your app you can create a component or a service such as you have and then call your *.js function from it as follows:

@Component
({
   selector: 'app-navigation',
   template: ...,
   styles: ...
})

export class NavigationComponent
{
     @ViewChild('navigation') navigation: ElementRef;

     onClick() {
         // Do your stuff
         // If you need to access navigation DOM element
         // Use this.navigation.nativeElement

         // Call your function
         (<any>window).ready();
     } 
}

It doesn’t make any sense. You shouldn’t use jQuery in such manner in Angular 2 project. I’ll say you shouldn’t use it at all in Angular 2 projects. There’s no need for manual DOM manipulation and attaching events. — Vitalii Chmovzh, Nov 04 '17 at 12:11
If anything I removed some of the jQuery that was in the OP. Why aren't you putting this comment on the OP? I provided a verified working example of how to do what the OP wanted to do. He didn't ask how to translate it into Angular. Your opinion that he shouldn't do it does not change the question, nor does it answer it. — Chris Sharp, Nov 04 '17 at 12:15

Where does custom JS belong in Angular?

2 Answers2