How to call an external jQuery functions in angular

Question

I am working on an Angular CLI Project where I need to call some jQuery functions.

I have included my js in the angular.json file:

"scripts": [
    "node_modules/jquery/dist/jquery.min.js",
    "src/custom.js"
]

jQuery function:

function A() { alert('A'); }
function B() { alert('B'); }

I have imported jQuery in my component where I need to call these jQuery functions :-

import * as $ from 'jquery';

tsconfig.app.json :

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "allowJs": true,
    "baseUrl": "./",
    "module": "es2015",
    "types": []
  },
  "exclude": [
    "test.ts",
    "**/*.spec.ts"
  ]
}

Now, how to import custom.js in my component and how to call these functions A & B?

Have you tried just calling them?

Reinstate Monica Cellio
– Reinstate Monica Cellio

2018-05-30 14:05:48 +00:00
Commented May 30, 2018 at 14:05 — Reinstate Monica Cellio
– Reinstate Monica Cellio, Commented May 30, 2018 at 14:05
can't be called directly..

Sunil Kumar
– Sunil Kumar

2018-05-31 06:06:32 +00:00
Commented May 31, 2018 at 6:06 — Sunil Kumar
– Sunil Kumar, Commented May 31, 2018 at 6:06

Jeffrey Roosendaal · Accepted Answer · 2018-05-31 12:19:27Z

1

I recommend installing the types for jquery if you haven't done so already:

npm install --save @types/jquery

So you can simply use it by just importing jQuery (jquery) in your component/service:

import 'jquery';

When you have problems compiling or building your application, it can be solved by wrapping your selector in (<any> ...) or (... as any):

// Use this
(<any> $('.myElement')).A();

// or this
($('.myElement') as any).A();

Update (see comments)

To execute code after page is ready, try implementing AfterViewInit to your main component (app-root):

import { Component, OnInit, AfterViewInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit, AfterViewInit {

  constructor(private someService: SomeService) { }

  ngAfterViewInit() {
    this.someService.someFunction();
  }
}

documentation for AfterViewInit

edited May 31, 2018 at 12:19

answered May 30, 2018 at 14:13

Jeffrey Roosendaal

7,1978 gold badges45 silver badges58 bronze badges

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

13 Comments

Sunil Kumar Over a year ago

thanks @Jeffrey but where did you call, i mean how to call them. And can't we call normal jQuery functions as I have.

Sunil Kumar Over a year ago

Is there no need to import my js file in component?

Jeffrey Roosendaal Over a year ago

@SunilKumar The import of the js files should be done in in the angular.json file, which you did correct (so it can be globally called). You do not need to import it in your component, you only need to import jquery itself using import 'jquery'; (make sure you install the jquery/types). To call your A/B functions, you should be able to call them using ($('.myElement') as any).A();

Sunil Kumar Over a year ago

ok @Jeffrey let me check but I have a doubt, could u pl explain what is "myElement" here, are you binding any html element here ?

Sunil Kumar Over a year ago

And can I call these functions as an normal jQuery functions or do i need to convert in module format?

|

Collectives™ on Stack Overflow

How to call an external jQuery functions in angular

1 Answer 1

13 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

13 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related